使用element table表格实现后端排序

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)
     	})
 		}
	}	
}

收工，下班~