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