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

————————————————
版权声明：本文为CSDN博主「木木木不哭」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44030791/article/details/125733971