自定义排序使用@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-columnprop="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组件不更新