使用element table表格实现后端排序
使用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)
})
}
}
}
收工,下班~
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)