Vue+Element-UI Table表头排序
Vue+Element-UI Table表头排序Vue代码定义后台需要接受的排序属性排序sortChangeVue代码<el-table v-loading="loading" :data="standardList" @sort-change='sortChange'><el-table-column label="序号" prop="id" width="80" sortab
·
Vue+Element-UI Table表头排序
- Vue代码
- 定义后台需要接受的排序属性
- 排序sortChange
Vue代码
<el-table v-loading="loading" :data="standardList" @sort-change='sortChange'>
<el-table-column label="序号" prop="id" width="80" sortable='custom'/>
</el-table>
在<el-table @sort-change=‘sortChange’> 需要加上 @sort-change=‘sortChange’
sortable=‘custom’ 你要排序的字段,加在排序的字段上
定义后台需要接受的排序属性
data() {
return {
// 查询参数
queryParams: {
// 当前页
pageNum: 1,
// 每页大小
pageSize: 10,
// desc、asc排序规则
isAsc: undefined,
// 需要排序的字段
orderByColumn: undefined
},
}
}
排序sortChange
sortChange 函数加在 methods: {} 中即可
//排序
sortChange (column, prop, order){
// 可以打印一下该函数的参数就明白了
// 下面的if判断根据自己的需要些我后台设置的只能识别desc与asc
if (column.order != null) {
this.queryParams.isAsc = 'desc';
} else {
this.queryParams.isAsc = 'asc';
}
// 排序的字段传给后台
this.queryParams.orderByColumn = column.prop
// 传入查询参数,重新查询一次
this.list(this.queryParams);
},
更多推荐
已为社区贡献2条内容
所有评论(0)