欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-table如何實(shí)現(xiàn)自定義表格排序

 更新時(shí)間:2022年07月29日 11:00:06   作者:節(jié)省錢  
這篇文章主要介紹了element-table如何實(shí)現(xiàn)自定義表格排序,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element-table 自定義表格排序

第一步

在el-table中加入 @sort-change=“sort_change” 事件,sort_change為自定義的排序方法

第二步

在el-table-colum中加入sortable=“custom”,使用了該屬性之后當(dāng)前列就可以進(jìn)行排序且排序時(shí)會(huì)調(diào)用sort_change方法進(jìn)行自定義排序

sortFun(attr, rev){
? ? ? // 第一個(gè)參數(shù)傳入info里的prop表示排的是哪一列,第二個(gè)參數(shù)是升還是降排序
? ? ? if (rev) {
? ? ? ? rev = 1;
? ? ? } else {
? ? ? ? rev = ?-1;
? ? ? }
? ? ? let that = this;
? ? ? return function (a, b) {
? ? ? ? let res = 0;
? ? ? ? for (let i = 0; ;i++) {
? ? ? ? ? if (!a[attr][i] || !b[attr][i]) {
? ? ? ? ? ? res = a[attr].length - b[attr].length;
? ? ? ? ? ? break;
? ? ? ? ? }
? ? ? ? ? let char1 = a[attr][i];
? ? ? ? ? let char1Type = that.getChartType(char1);
? ? ? ? ? let char2 = b[attr][i];
? ? ? ? ? let char2Type = that.getChartType(char2);
? ? ? ? ? // 類型相同的逐個(gè)比較字符
? ? ? ? ? if (char1Type[0] === char2Type[0]) {
? ? ? ? ? ? // console.log('字符類型相同');
? ? ? ? ? ? if (char1 === char2) {
? ? ? ? ? ? ? res = 0;
? ? ? ? ? ? ? // console.log('值全等', res);
? ? ? ? ? ? ? continue;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? if (char1Type[0] === 'zh') {
? ? ? ? ? ? ? ? res = char1.localeCompare(char2);
? ? ? ? ? ? ? ? // console.log('a的字符類型為中文', res);
? ? ? ? ? ? ? } else if (char1Type[0] === 'en') {
? ? ? ? ? ? ? ? res = char1.charCodeAt(0) - char2.charCodeAt(0);
? ? ? ? ? ? ? ? // console.log('a的字符類型為英文', res);
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? res = char1 - char2;
? ? ? ? ? ? ? ? // console.log('a的字符類型為數(shù)字', res);
? ? ? ? ? ? ? }
? ? ? ? ? ? ? // console.log('值不相等比較的結(jié)果', res);
? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? } else {
? ? ? ? ? ? // 類型不同的,直接用返回的數(shù)字相減
? ? ? ? ? ? var num1 = char1Type[1];
? ? ? ? ? ? var num2 = char2Type[1];
? ? ? ? ? ? res = num1 - num2;
? ? ? ? ? ? break;
? ? ? ? ? }
? ? ? ? }
? ? ? ? return res * rev;
? ? ? };
? ? }
? ? sort_change(column) {
? ? ? // this.currentPage = 1;// return to the first page after sorting
? ? ? if (column.prop === 'configTemplateName') {
? ? ? ? // 對(duì)展示的源數(shù)據(jù)進(jìn)行重新排序
? ? ? ? ?this.configTemplatesFilter.sort(this.sortFun(column.prop, column.order === 'ascending'));
? ? ? } else if (column.prop === 'configTemplatePattern') {
? ? ? ? // 對(duì)展示的源數(shù)據(jù)進(jìn)行重新排序
? ? ? ? this.configTemplatesFilter.sort(this.sortFun(column.prop, column.order === 'ascending'));
? ? ? }
? ? ? // 排序完顯示到第一頁(yè)
? ? ? this.handleCurrentChange(this.currentPage);
? ? }
? ? getChartType(char) {
? ? ? // 數(shù)字可按照排序的要求進(jìn)行自定義 ;數(shù)字(0->9)->大寫字母(A->Z)->小寫字母(a->z)->中文拼音(a->z)
? ? ? if (/^[u4e00-u9fa5]$/.test(char)) {
? ? ? ? return ['zh', 3];
? ? ? }
? ? ? if (/^[a-zA-Z]$/.test(char)) {
? ? ? ? return ['en', 2];
? ? ? }
? ? ? if (/^[0-9]$/.test(char)) {
? ? ? ? return ['number', 1];
? ? ? }
? ? ? return ['others', 4];
? ? }
? ?handleCurrentChange(val) {
? ? ? this.configTempLoading = true;
? ? ? this.currentPage = val;
? ? ? this.configTemplatesView = this.configTemplatesFilter.filter(data => !this.queryParam.configTemplateName || data.configTemplateName.toLowerCase().includes(this.queryParam.configTemplateName.toLowerCase())).slice((val - 1) * this.pageSize, val * this.pageSize);
? ? ? this.configTempLoading = false;
? ? }

原理

當(dāng)觸發(fā)排序時(shí)判斷是升序還是降序然后使用sort方法對(duì)要展示的源數(shù)據(jù)數(shù)組(未分頁(yè)過濾的數(shù)據(jù))進(jìn)行重新排序;然后再進(jìn)行分頁(yè)過濾進(jìn)行數(shù)據(jù)展示

注意:當(dāng)我們排序完之后再次點(diǎn)擊同一個(gè)排序圖標(biāo)時(shí)column.order上的值時(shí)null;此時(shí)需要考慮是否恢復(fù)排序前的數(shù)據(jù)展示;最好使用一個(gè)中間變量來(lái)保存排序前的數(shù)據(jù),這樣不需要排序時(shí)直接使用中間變量進(jìn)行展示即可 

element-table表格 自定義排序規(guī)則

項(xiàng)目需求

前端做排序,后臺(tái)返回的數(shù)據(jù)有合計(jì)一項(xiàng),排序時(shí),合計(jì)始終在最后一行

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

使用

在這里插入圖片描述

在這里插入圖片描述

@sort-change='sortChange'
   <el-table-column
      prop="revPar"
      align='center'
      sortable="custom"  
      label="RevPAR"
      width="110">
    </el-table-column>
sortChange(column){
      let arr = []
      this.tableData.forEach(val=>{
        arr.push(val)
      })
      if(column.order=='descending'){
        this.tableDatalist = arr.sort((a, b) => {
          let aVal =0
          if(String(a[fieldName]).indexOf('%')!=-1){
            aVal = Number(a[fieldName].split('%')[0])
          }else{
           aVal = Number(a[fieldName])
          }
          let bVal =0
          if(b[fieldName].indexOf('%')!=-1){
            bVal = Number(b[fieldName].split('%')[0])
          }else{
           bVal = Number(b[fieldName])
          }
          if (a.name == '合計(jì)') {
            aVal = -9999
          }
          if (b.name == '合計(jì)') {
            bVal = -9999
          }
          return bVal - aVal
        })
      }else if(column.order=='ascending'){
        this.tableDatalist = arr.sort((a, b) => {
          let aVal =0
          if(a[fieldName].indexOf('%')!=-1){
            aVal = Number(a[fieldName].split('%')[0])   //因?yàn)閿?shù)據(jù)中有%,沒有的話可以去掉
          }else{
           aVal = Number(a[fieldName])
          }
          let bVal =0
          if(b[fieldName].indexOf('%')!=-1){
            bVal = Number(b[fieldName].split('%')[0])
          }else{
           bVal = Number(b[fieldName])
          }
          if (a.name == '合計(jì)') {
            aVal = 9999
          }
          if (b.name == '合計(jì)') {
            bVal = 9999
          }
          return aVal - bVal
        })
      }else{
        this.tableDatalist = this.tableData
      }
    },

具體操作根據(jù)業(yè)務(wù)需求自行修改

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼

    vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-11-11
  • vue--vuex詳解

    vue--vuex詳解

    這篇文章主要介紹了vue--vuex的詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue引入路徑正確但一直報(bào)錯(cuò)問題:Already included file name ‘××ב differs from file name ‘××ב only in casing.

    Vue引入路徑正確但一直報(bào)錯(cuò)問題:Already included file name&n

    這篇文章主要介紹了Vue引入路徑正確但一直報(bào)錯(cuò):Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • 示例vue 的keep-alive緩存功能的實(shí)現(xiàn)

    示例vue 的keep-alive緩存功能的實(shí)現(xiàn)

    這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-12-12
  • Vue實(shí)現(xiàn)Layui的集成方法步驟

    Vue實(shí)現(xiàn)Layui的集成方法步驟

    這篇文章主要介紹了Vue實(shí)現(xiàn)Layui的集成方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue+element實(shí)現(xiàn)表單校驗(yàn)功能

    vue+element實(shí)現(xiàn)表單校驗(yàn)功能

    這篇文章主要介紹了vue+element表單校驗(yàn)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • Vue+Element-U實(shí)現(xiàn)分頁(yè)顯示效果

    Vue+Element-U實(shí)現(xiàn)分頁(yè)顯示效果

    這篇文章主要為大家詳細(xì)介紹了Vue+Element-U實(shí)現(xiàn)分頁(yè)顯示效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作

    vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作

    這篇文章主要介紹了vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2020-07-07
  • vue mounted組件的使用

    vue mounted組件的使用

    這篇文章主要介紹了vue mounted組件的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-06-06
  • vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法

    vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法

    今天小編就為大家分享一篇vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2019-10-10

最新評(píng)論