element Table表格组件多字段(多列)排序方法
更新时间：2021年09月29日 10:59:43 作者：Java_AiNiYo
最近需要做个需求，需要做到element Table表格组件多字段(多列)排序，本文就详细的介绍一下方法，感兴趣的可以了解一下
需求：
element表格多列排序，点击日期的排序，然后再点击姓名的排序，将两个排序字段传给后端排序
遇到的问题：
element的Table组件只支持单列排序，当你点击另一列的排序的时候，会自动取消上一个排序。网上搜了一下方法，这篇文章提出用:header-cell-class-name 和 @sort-change来处理多列排序的样式问题，我试了半天，发现这个sort-change事件在取消排序的时候会返回null，使我根本定位不到是哪一列取消了排序，总而言之，靠着element-table的事件是解决不了问题了。
解决：
通过自定义表头，直接把两个小图标粘贴进表头。然后各自绑定点击排序事件。这样我们既能获取到排序状态（升序、降序、无排序）又能获取到排序的列名。说到这里，读者就应该明白了，具体代码在内网里，也不好粘贴出来，有不明白的地方请评论，我会尽力回答~
到此这篇关于element Table表格组件多字段(多列)排序方法的文章就介绍到这了,更多相关element Table多字段排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决vue动态路由异步加载import组件,加载不到module的问题
这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最近工作中遇到了element表单校验失败的情况,通过查找相关资料终于解决了,所以下面这篇文章主要给大家介绍了关于element表单使用校验之校验失效问题的相关资料,需要的朋友可以参考下2022-10-10
在浏览网页时我们有些时候需要记住一些用户选择的信息,比如登陆时我们如果选择了记住密码,那么我们下次进入该网页时就会有你上次的登陆信息,下面这篇文章主要给大家介绍了关于vuex存储数据的几种方法,需要的朋友可以参考下2022-10-10
今天小编就为大家分享一篇vue 组件内获取actions的response方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本文主要介绍了vue中使用typescript配置，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue使用$emit实现同步调用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
VUE2响应式原理使用Object.defineProperty缺点
这篇文章主要为大家介绍了VUE2响应式原理使用Object.defineProperty缺点示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
vue3配置permission.js和router、pinia实现路由拦截的简单步骤
这篇文章主要介绍了如何在场景网站中实现对未登录用户访问的拦截,通过配置Pinia,创建一个user.js文件来存储用户数据,并在main.js中进行配置,同时通过在router目录下创建permission.js文件,可以实现对未登录用户的拦截,需要的朋友可以参考下2024-11-11
vue通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了，本文具体的介绍下这些辅助函数的使用方法2021-06-06
最新评论