element Table表格組件多字段(多列)排序方法
需求：
element表格多列排序，點(diǎn)擊日期的排序，然后再點(diǎn)擊姓名的排序，將兩個(gè)排序字段傳給后端排序
遇到的問題：
element的Table組件只支持單列排序，當(dāng)你點(diǎn)擊另一列的排序的時(shí)候，會(huì)自動(dòng)取消上一個(gè)排序。網(wǎng)上搜了一下方法，這篇文章提出用:header-cell-class-name 和 @sort-change來處理多列排序的樣式問題，我試了半天，發(fā)現(xiàn)這個(gè)sort-change事件在取消排序的時(shí)候會(huì)返回null，使我根本定位不到是哪一列取消了排序，總而言之，靠著element-table的事件是解決不了問題了。
解決：
通過自定義表頭，直接把兩個(gè)小圖標(biāo)粘貼進(jìn)表頭。然后各自綁定點(diǎn)擊排序事件。這樣我們既能獲取到排序狀態(tài)（升序、降序、無排序）又能獲取到排序的列名。說到這里，讀者就應(yīng)該明白了，具體代碼在內(nèi)網(wǎng)里，也不好粘貼出來，有不明白的地方請?jiān)u論，我會(huì)盡力回答~
到此這篇關(guān)于element Table表格組件多字段(多列)排序方法的文章就介紹到這了,更多相關(guān)element Table多字段排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題
這篇文章主要介紹了解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
element表單使用校驗(yàn)之校驗(yàn)失效問題詳解
最近工作中遇到了element表單校驗(yàn)失敗的情況,通過查找相關(guān)資料終于解決了,所以下面這篇文章主要給大家介紹了關(guān)于element表單使用校驗(yàn)之校驗(yàn)失效問題的相關(guān)資料,需要的朋友可以參考下2022-10-10
vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解
在瀏覽網(wǎng)頁時(shí)我們有些時(shí)候需要記住一些用戶選擇的信息,比如登陸時(shí)我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁時(shí)就會(huì)有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲(chǔ)數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
vue 組件內(nèi)獲取actions的response方式
今天小編就為大家分享一篇vue 組件內(nèi)獲取actions的response方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文主要介紹了vue中使用typescript配置，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue使用$emit實(shí)現(xiàn)同步調(diào)用
這篇文章主要介紹了vue使用$emit實(shí)現(xiàn)同步調(diào)用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue3?自定義指令控制按鈕權(quán)限,為了提高用戶體驗(yàn)，當(dāng)該按鈕無權(quán)使用時(shí)，使用el-tooltip功能進(jìn)行提醒，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)
這篇文章主要為大家介紹了VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡單步驟
這篇文章主要介紹了如何在場景網(wǎng)站中實(shí)現(xiàn)對未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個(gè)user.js文件來存儲(chǔ)用戶數(shù)據(jù),并在main.js中進(jìn)行配置,同時(shí)通過在router目錄下創(chuàng)建permission.js文件,可以實(shí)現(xiàn)對未登錄用戶的攔截,需要的朋友可以參考下2024-11-11
vue通過輔助函數(shù)mapState、mapActions、mapMutations，把vuex.store中的屬性映射到vue實(shí)例身上，這樣在vue實(shí)例中就能訪問vuex.store中的屬性了，對于操作vuex.store就很方便了，本文具體的介紹下這些輔助函數(shù)的使用方法2021-06-06