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项目报错:parseComponent问题及解决

    Vue项目报错:parseComponent问题及解决

    这篇文章主要介绍了Vue项目报错:parseComponent问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 基于VUE.JS的移动端框架Mint UI的使用

    基于VUE.JS的移动端框架Mint UI的使用

    本篇文章主要介绍了基于VUE.JS的移动端框架Mint UI的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue关于eslint空格缩进等的报错问题及解决

    vue关于eslint空格缩进等的报错问题及解决

    这篇文章主要介绍了vue关于eslint空格缩进等的报错问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 解读Vue组件注册方式

    解读Vue组件注册方式

    无论是Vue还是React,都有组件的概念。组件,就是能和别人组合在一起的物件。在前端页面开发过程中,将一个页面划分成一个个小的模块,每个模块单独定义,每个模块就是一个组件。组件可以进行复用,A页面和B页面有一个相似的模块,可以抽离成一个可局部修改的组件。
    2021-05-05
  • vuex state及mapState的基础用法详解

    vuex state及mapState的基础用法详解

    这篇文章主要介绍了vuex state及mapState的基础用法详解,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友跟随脚本之家小编一起学习吧
    2018-04-04
  • ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码功能

    ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码功能

    这篇文章主要介绍了 ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字点选验证码为例,不需要键盘手动输入,极大优化了传统验证码用户体验不佳的问题,感兴趣的朋友一起看看吧
    2023-12-12
  • vue2项目实现自定义右键菜单,可添加图标、事件等方式

    vue2项目实现自定义右键菜单,可添加图标、事件等方式

    这篇文章主要介绍了vue2项目实现自定义右键菜单,可添加图标、事件等方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 如何解决Element UI el-dialog打开一次后无法再次打开问题

    如何解决Element UI el-dialog打开一次后无法再次打开问题

    这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue3.0 CLI - 2.5 - 了解组件的三维

    vue3.0 CLI - 2.5 - 了解组件的三维

    通过本文带领大家去学习vue3.0 CLI - 2.5 - 了解组件的三维的相关知识,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-09-09
  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    使用Vue.js和Element-UI做一个简单登录页面的实例

    下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论