1、在el-table-colum中将sortables设置为custom,在table中监听sort-chang事件,在事件获取当前排序的字段名和排序顺序,向接口发送排序后的表格数据。

<el-table :data="tableData" border style="width: 100%; margin-top: 10px" @sort-change="sortChange">
      <el-table-column
        type="index"
        width="100"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column prop="company" label="公司" width="200" align="center" sortable='custom'>
      </el-table-column>
 </el-table>
 

2、在methods监听sort-chang事件

export defult (){
	data(){
	return{
		sidx:'',
      	order:'',
		}
	},
	methods:{
	// 排序
    sortChange(column){
      console.log(column.prop,column.order,'777')
      if(column.order === 'descending' ){
        this.sidx  = column.prop  //  当前排序的字段
        this.order = 'desc' // 排序或倒序
      }else {
        this.sidx = column.prop
        this.order = 'asc' // 排序或倒序
      }
      this.getSmsList()
    }
    // 请求
    getSmsList(){
    this.$http({
        url: this.$http.adornUrl("recipient/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          sidx: this.sidx,  // 当前排序的字段
          order:this.order  // 排序或倒序
        })
     }).then((res)=>{
     		console.log(res)
     	})
 		}
	}	
}

收工,下班~

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐