element Table表格組件多字段(多列)排序方法
更新時間：2021年09月29日 10:59:43 作者：Java_AiNiYo
最近需要做個需求，需要做到element Table表格組件多字段(多列)排序，本文就詳細的介紹一下方法，感興趣的可以了解一下
需求：
element表格多列排序，點擊日期的排序，然后再點擊姓名的排序，將兩個排序字段傳給后端排序
遇到的問題：
element的Table組件只支持單列排序，當你點擊另一列的排序的時候，會自動取消上一個排序。網(wǎng)上搜了一下方法，這篇文章提出用:header-cell-class-name 和 @sort-change來處理多列排序的樣式問題，我試了半天，發(fā)現(xiàn)這個sort-change事件在取消排序的時候會返回null，使我根本定位不到是哪一列取消了排序，總而言之，靠著element-table的事件是解決不了問題了。
解決：
通過自定義表頭，直接把兩個小圖標粘貼進表頭。然后各自綁定點擊排序事件。這樣我們既能獲取到排序狀態(tài)（升序、降序、無排序）又能獲取到排序的列名。說到這里，讀者就應該明白了，具體代碼在內(nèi)網(wǎng)里，也不好粘貼出來，有不明白的地方請評論，我會盡力回答~
到此這篇關于element Table表格組件多字段(多列)排序方法的文章就介紹到這了,更多相關element Table多字段排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue項目報錯:parseComponent問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了基于VUE.JS的移動端框架Mint UI的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue關于eslint空格縮進等的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
無論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中，將一個頁面劃分成一個個小的模塊，每個模塊單獨定義，每個模塊就是一個組件。組件可以進行復用，A頁面和B頁面有一個相似的模塊，可以抽離成一個可局部修改的組件。2021-05-05
這篇文章主要介紹了vuex state及mapState的基礎用法詳解,本文通過實例代碼相結合的形式給大家介紹的非常詳細，需要的朋友跟隨腳本之家小編一起學習吧2018-04-04
ruoyi-vue3 集成aj-captcha實現(xiàn)滑塊、文字點選驗證碼功能
這篇文章主要介紹了 ruoyi-vue3 集成aj-captcha實現(xiàn)滑塊、文字點選驗證碼,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字點選驗證碼為例,不需要鍵盤手動輸入,極大優(yōu)化了傳統(tǒng)驗證碼用戶體驗不佳的問題,感興趣的朋友一起看看吧2023-12-12
vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標、事件等方式
這篇文章主要介紹了vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
如何解決Element UI el-dialog打開一次后無法再次打開問題
這篇文章主要介紹了如何解決Element UI el-dialog打開一次后無法再次打開問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
通過本文帶領大家去學習vue3.0 CLI - 2.5 - 了解組件的三維的相關知識，感興趣的朋友跟隨腳本之家小編一起學習吧2018-09-09
使用Vue.js和Element-UI做一個簡單登錄頁面的實例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個簡單登錄頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02