Vue el-table的自定义排序返回值为null,设置刷新页面保持排序标志,导航时elementui组件不更新

自定义排序使用@sort-change="sortChange"监听,表列需设置为sortable="custom"(自定义)

html 复制代码
<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情况。参考文章
js 复制代码
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其他组件)
js 复制代码
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
		}

在下面函数中调用刷新方法:

js 复制代码
	watch:{
	  	$route(){
			this.update();
	  	}
	},
	mounted() {
		this.update();	
	}	

解决了3个问题:1、自定义排序返回值为null;2、设置刷新页面保持排序标志;3、导航时elementui组件不更新

相关推荐
伍哥的传说15 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783817 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊28 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为