table远程排序:
要排序的属性添加:sortable='custom'
table添加:@sort-change='sortChange'
页面pug:
el-table(
:data='dataList'
border
@sort-change='sortChange'
)
el-table-column(prop='ruleId' label='配置编号' align='center' sortable='custom' width='120')
...
el-table-column(prop='lastUpdateTime' label='最后修改时间' align='center' width='140' sortable='custom')
js:
// 监听表头点击获取排序参数
sortChange(column) {
const { order = '', prop = '' } = column;
this.loadData(order, prop);
},
跟后端约定请求数据函数接口添加参数:
loadData(order = 'descending', prop = 'lastUpdateTime') { // 加载数据
const params = {
...
'orderBy.property': prop,
'orderBy.direction': order === 'ascending' ? 'asc' : 'desc',
};
...
},
table 表头存在两个要排序的prop 时,指定默认排序的方式:
html添加属性::default-sort='defaultSort'
el-table(
:data='dataList'
border
@sort-change='sortChange'
:default-sort='defaultSort'
)
js:
defaultSort: {
prop: 'lastUpdateTime',
order: 'descending',
},
当点击另一个prop 排序之后再点击查询按钮,怎么手动干预将排序的选中状态修改成默认排序的prop:
table 设置ref:
el-table(
:data='dataList'
border
@sort-change='sortChange'
:default-sort='defaultSort'
ref="table"
)
js:
search() { // 搜索数据
this.loadData();
this.$refs.table.sort('lastUpdateTime', 'descending'); // 手动修改table排序按钮选中状态
},