Vue el-table的自界说排序返回值为null，设置革新页面保持排序标志，导航时elementui组件不更新
自界说排序使用@sort-change="sortChange"监听，表列需设置为sortable=“custom”（自界说）<el-table
:data="tableData"
border
@sort-change="sortChange"
:default-sort="{prop:sortProp,order:sortOrder}"
style="width: 100%"
:key="tableKey+'table'">
......
<el-table-column
prop="date"
label="日期"
sortable="custom"
width="150">
</el-table-column>
......
[*]排序变乱传入参数格式为： {column: {…}, prop: 'commentnum', order: 'descending'}，观察发现第一列排序时obj.order有‘descending’、‘ascending’、null三个值，有文章提到设置:sort-orders="['ascending', 'descending']",但此官方分析只支持sortable为true环境（默认表格排序）。以是我们需手动设置当obj.order为null环境。参考文章
sortChange(obj){
//{column: {…}, prop: 'commentnum', order: 'descending'}
//{column: {…}, prop: 'commentnum', order: 'ascending'}
// console.log(obj);
this.sortProp=obj.prop;
if (obj.order === null) {
this.sortOrder === 'descending' ? obj.order = 'ascending' : obj.order = 'descending';
obj.column.order = obj.order;
}
this.sortOrder=obj.order;
//路由跳转
this.$router.push({
path: "/doBlog",
query: { cp: 1 ,sortProp:this.sortProp,sortOrder:this.sortOrder,time:Date.now()},
});
},
[*]革新页面时要保持对应列的排序标志可设置:default-sort="{prop:sortProp,order:sortOrder}"，革新页面获取路由值即可。
[*]但假如是用导航栏切换页面，表头的排序标志仍旧不更新，以是改变table的:key="tableKey+'table'"就能包管更新了。（实用于elementui其他组件）
update(){
this.currentPage=this.$route.query.cp?parseInt(this.$route.query.cp,10):1;
this.sortProp=this.$route.query.sortProp?this.$route.query.sortProp:"id";
this.sortOrder=this.$route.query.sortOrder?this.$route.query.sortOrder:"ascending";
this.pageKey++;//强制更新分页组件
this.tableKey++;//强制更新el-table排序标志
//获取数据
//。。。ajax
}
在下面函数中调用革新方法：
watch:{
$route(){
this.update();
}
},
mounted() {
this.update();
}
办理了3个标题：1、自界说排序返回值为null；2、设置革新页面保持排序标志；3、导航时elementui组件不更新
页:
[1]