element 實(shí)現(xiàn)多列表格 支持默認(rèn)排序

第一步 表格添加配置

<el-table
@sort-change="onSortChange"
:header-cell-class-name="handleHeaderClass"
:header-cell-style="handleTheadStyle">

第二步 設(shè)置你和后端約定好的 自定義custom 排序傳參字段

此處我和后端約定好是 當(dāng)element 組件是 descending ,就轉(zhuǎn)換為  DESC
可自定義或者無(wú)需聲明變量
const SortMap = {
  descending: "DESC",
  ascending: "ASC",
};
const ReversalSortMap = {
  DESC: "descending",
  ASC: "ascending",
};

第三步 data設(shè)置一個(gè) 存儲(chǔ)多列排序變量

data(){
 return{ 
  //緩存排序規(guī)則
  ordersList: []
  // { prop :"", order:"DESC"} 此處是排序字段的結(jié)構(gòu)。不同需求設(shè)計(jì)因人而異

第四步 過(guò)濾掉order為空 null 的情況。因?yàn)閑lement 排序的值可以是 descending ascending 或 null垂睬。將這個(gè)作為排序參數(shù)傳給后端钳枕,避免 null 值傳遞

computed:{
  orderListParams() {
    return this.ordersList.filter(item => item.order);
 }

第四步 假如表格需要支持第一次加載數(shù)據(jù)有 默認(rèn)排序 可在配置上添加 defaultSortOrder

//在 created 上進(jìn)行初始化
created() {
   this.ordersList = this.tableConfig
     .filter(item => item.defaultSortOrder)
     .map(item => ({
       prop: item.eleAttr.prop,
       order: item.defaultSortOrder
    }))
  }

此處tableconfig為 (每個(gè)人的表格列配置結(jié)構(gòu)和 命名不一樣蝌借,此處為了方便演示)
 [{
   defaultSortOrder:"ASC",
   eleAttr: {
     label: "日期",
     prop: "date",
     sortable: "custom", (可以為 true 或 custom)
  }
 }
]

對(duì)應(yīng) 
 <el-table-column
    prop="date"
    label="日期"
   :sortable="eleAttr.sortable"
 >
 </el-table-column>

第五步 添加處理方法

// 設(shè)置列的排序?yàn)槲覀冏远x的排序 (無(wú)法支持默認(rèn)排序自晰,故而采用 handleTheadStyle)
handleHeaderClass({ column }) {
   column.order = column.multiOrder;
},


// 設(shè)置列的排序?yàn)槲覀冏远x的排序  (多列的情況下使用)
handleTheadStyle({ row, column, rowIndex, columnIndex }) {
//該回調(diào)方法初始化的時(shí)候每一列都會(huì)調(diào)用,為提升性能糟把, 增加下邊兩個(gè)if 判斷
 if (this.orderListParams && this.orderListParams.length) {
    const single = this.orderListParams.find(item => item.prop === column.property)
    if (single) {
      //由于是和后端自定義了字段雄可,和 eltable不一樣数苫,所以要 ReversalSortMap 反轉(zhuǎn)回來(lái)
      column.order = ReversalSortMap[single.order]
    }
  }
 }

   onSortChange({ column, prop, order }) {
      column.multiOrder = order;
      if (prop) {
        const result = this.ordersList.find(item => item.prop === prop);
        const orderValue = SortMap[order]
        if (result) {
          result.order = orderValue;
        } else {
          this.ordersList.push({
            prop,
            order: orderValue,
          });
        }
      }
  //此方法 表格數(shù)據(jù)查詢(xún)接口
      this.getTableData();
    }

//下一頁(yè)的時(shí)候
   onPageChange(pageConfig) {
      const { page, pageSize } = pageConfig;
      // do something.....
      this.getTableData();
    }

 // 獲取列表數(shù)據(jù)
    getTableData() {
    let submitData = {
       page: {
         page,
         pageSize,
         // 根據(jù)服務(wù)端約定傳遞
         sort: this.orderListParams,
      }
   }
  //api
    xxxx(submitData).then(xxxx)
}

其他參考文獻(xiàn)
https://blog.csdn.net/qq_37485170/article/details/134138801

https://blog.csdn.net/qq_45927262/article/details/137629880#:~:text=1%EF%BC%9A%E5%9C%A8%20el%20-%20table%20%E4%B8%8A%E5%8A%A0%E4%B8%8A%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%40sort-change%3D%E2%80%9CsortChange%E2%80%9D,2%EF%BC%9A%E5%9C%A8%E6%83%B3%E8%A6%81%20%E6%8E%92%E5%BA%8F%20%E7%9A%84%E8%A1%A8%E5%A4%B4%E4%B8%8A%E5%8A%A0%E4%B8%8A%20sortable%20%3D%E2%80%9Ccustom%E2%80%9D%203%EF%BC%9A%E5%A4%9A%E7%9C%8B%E6%96%87%E6%A1%A3%E3%80%82

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末燎悍,一起剝皮案震驚了整個(gè)濱河市俄删,隨后出現(xiàn)的幾起案子臊诊,更是在濱河造成了極大的恐慌,老刑警劉巖壶硅,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蚂踊,死亡現(xiàn)場(chǎng)離奇詭異棱诱,居然都是意外死亡迈勋,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)育苟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)笨腥,“玉大人,你說(shuō)我怎么就攤上這事烤礁。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我沦疾,道長(zhǎng),這世上最難降的妖魔是什么凳谦? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任彻桃,我火速辦了婚禮,結(jié)果婚禮上晾蜘,老公的妹妹穿的比我還像新娘。我一直安慰自己眠屎,他們只是感情好剔交,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著改衩,像睡著了一般岖常。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上葫督,一...
    開(kāi)封第一講書(shū)人閱讀 51,231評(píng)論 1 299
  • 那天竭鞍,我揣著相機(jī)與錄音,去河邊找鬼橄镜。 笑死偎快,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的洽胶。 我是一名探鬼主播晒夹,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了丐怯?” 一聲冷哼從身側(cè)響起喷好,我...
    開(kāi)封第一講書(shū)人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎读跷,沒(méi)想到半個(gè)月后梗搅,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡效览,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年无切,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钦铺。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡订雾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出矛洞,到底是詐尸還是另有隱情洼哎,我是刑警寧澤,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布沼本,位于F島的核電站噩峦,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏抽兆。R本人自食惡果不足惜识补,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望辫红。 院中可真熱鬧凭涂,春花似錦、人聲如沸贴妻。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)名惩。三九已至澎胡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間娩鹉,已是汗流浹背攻谁。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留弯予,地道東北人戚宦。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像锈嫩,于是被迫代替她去往敵國(guó)和親阁苞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子困檩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容