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组件不更新

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于自定义排序,你可以使用`sort-method`属性来自定义`el-table`组件中的排序规则。 首先,你需要在表格的`el-table-column`组件设置`sortable`属性为true,以启用列的排序功能。然后,你可以通过设置`sort-method`属性为一个自定义排序函数来实现自定义排序。 例如,假设你有一个名为`score`的列,你可以按照以下方式自定义排序: ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="score" label="分数" sortable :sort-method="customSort"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '小明', score: 85 }, { name: '小红', score: 90 }, { name: '小刚', score: 78 }, { name: '小亮', score: 95 }, ] } }, methods: { customSort(a, b) { // 自定义排序函数 // 这里示例按照分数从高到低排序 return b - a; } } } </script> ``` 在上述例子中,我们在`el-table-column`组件设置了`sort-method`属性为`customSort`,并在Vue实例的`methods`中定义了名为`customSort`的自定义排序函数。该函数接收两个参数`a`和`b`,分别代表两个进行比较的数据项。在这个例子中,我们按照分数从高到低排序,所以返回`b - a`。 这样,当用户点击表格头部的分数列,表格将会使用我们定义的自定义排序函数来对数据进行排序
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值