当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/407869.html

相关文章:

  • 一起笨笨的学C ——16链表基础
  • 信息学奥赛一本通1917:【01NOIP普及组】装箱问题
  • android user 版本如何手动触发dump
  • RedHat Linux 7.5 安装 mssql-server
  • Vue的SSR和预渲染:提升首屏加载速度与SEO效果
  • 若依ruoyi+AI项目二次开发(智能售货机运营管理系统)
  • 【SpringBoot】 4 Thymeleaf
  • 动静资源的转发操作
  • Windows系统安全加固方案:快速上手系统加固指南(上)
  • git连接远程仓库
  • 算法-----递归~~搜索~~回溯(宏观认识)
  • 【云原生】Docker搭建知识库文档协作平台Confluence
  • 序列化与反序列化的本质
  • 飞牛爬虫FlyBullSpider 一款简单方便强大的爬虫,限时免费 特别适合小白!用它爬下Boss的2024年7月底Java岗位,分析一下程序员就业市场行情
  • EXCEL 排名(RANK,COUNTIFS)
  • 【踩坑系列-JS】iframe中的url参数获取
  • 测试工作中常听到的名词解释 : )
  • Linux内网离线用rsync和inotify-tools实现文件夹文件单向同步和双向同步
  • Spring Security学习笔记(二)Spring Security认证和鉴权
  • 产品经理NPDP好考吗?
  • 【C++】:红黑树的应用 --- 封装map和set
  • unity美术资源优化(资源冗余,主界面图集过多)
  • 【git】github中的Pull Request是什么
  • gitlab查询分支API显示不全,只有20个问题
  • vue3+vite 实现动态引入某个文件夹下的组件 - glob-import的使用
  • hhhhh
  • 扫雷小游戏纯后端版
  • RuoYi-Vue-Plus(动态添加移除数据源)
  • idea启动项目报:the command line via JAR manifest or via a classpath file and rerun.
  • vue3 + ts中有哪些类型是由vue3提供的?