Vue el-table的自界说排序返回值为null，设置革新页面保持排序标志，导航时elementui组件不更新

自界说排序使用@sort-change="sortChange"监听，表列需设置为sortable=“custom”（自界说）

1. <el-table
2.                     :data="tableData"
3.                     border
4.                         @sort-change="sortChange"
5.                         :default-sort="{prop:sortProp,order:sortOrder}"
6.                     style="width: 100%"
7.                         :key="tableKey+'table'">
8.                         ......
9.                         <el-table-column
10.                       prop="date"
11.                       label="日期"
12.                           sortable="custom"
13.                       width="150">
14.                     </el-table-column>
15.                     ......

复制代码

• 排序变乱传入参数格式为： {column: {…}, prop: 'commentnum', order: 'descending'}，观察发现第一列排序时obj.order有‘descending’、‘ascending’、null三个值，有文章提到设置:sort-orders="['ascending', 'descending']",但此官方分析只支持sortable为true环境（默认表格排序）。以是我们需手动设置当obj.order为null环境。参考文章
  

1. sortChange(obj){
2.                         //{column: {…}, prop: 'commentnum', order: 'descending'}
3.                         //{column: {…}, prop: 'commentnum', order: 'ascending'}
4.                         // console.log(obj);
5.                         this.sortProp=obj.prop;
6.                         if (obj.order === null) {
7.                                 this.sortOrder === 'descending' ? obj.order = 'ascending' : obj.order = 'descending';
8.                                 obj.column.order = obj.order;
9.                         }
10.                         this.sortOrder=obj.order;
11.                         //路由跳转
12.                         this.$router.push({
13.                           path: "/doBlog",
14.                           query: { cp: 1 ,sortProp:this.sortProp,sortOrder:this.sortOrder,time:Date.now()},
15.                         });       
16.                 },

复制代码

• 革新页面时要保持对应列的排序标志可设置:default-sort="{prop:sortProp,order:sortOrder}"，革新页面获取路由值即可。
  
• 但假如是用导航栏切换页面，表头的排序标志仍旧不更新，以是改变table的:key="tableKey+'table'"就能包管更新了。（实用于elementui其他组件）
  

1. update(){
2.                         this.currentPage=this.$route.query.cp?parseInt(this.$route.query.cp,10):1;
3.                         this.sortProp=this.$route.query.sortProp?this.$route.query.sortProp:"id";
4.                         this.sortOrder=this.$route.query.sortOrder?this.$route.query.sortOrder:"ascending";
5.                         this.pageKey++;//强制更新分页组件
6.                         this.tableKey++;//强制更新el-table排序标志
7.                         //获取数据
8.                         //。。。ajax
9.                 }

复制代码

在下面函数中调用革新方法：

1.         watch:{
2.                   $route(){
3.                         this.update();
4.                   }
5.         },
6.         mounted() {
7.                 this.update();       
8.         }       

复制代码

办理了3个标题：1、自界说排序返回值为null；2、设置革新页面保持排序标志；3、导航时elementui组件不更新