自定義合並列:el-table


    objectSpanMethod({ row, column, rowIndex, columnIndex }) {//合並規則
      //當前行row、當前列column、當前行號rowIndex、當前列號columnIndex
      if (columnIndex === 0) {//第一列:參數column.property,內容:row.name,合並數量this.columnDatas[row.name]
        console.log(this.columnDatas[rowIndex],column.property,row.name,"讀取參數")
        const _row = this.columnDatas[rowIndex];//每一列的數目:[1,2,0,1]
        if (_row) {
          return {
            rowspan: _row,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

注:目標是計算合並相同key的數量_row,而且是一個數組格式

    //合並相同key的數據data:如:this.getSpanArr(this.dataSource,"name");//[1,2,0,1]
    getSpanArr(data,key) {
      let spanArr = [];
      let spanIndex = null;
      if (data == null) {
        return [];
      } else {
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            spanArr.push(1);
            spanIndex = 0;
          } else {
            if (data[i][key]=== data[i - 1][key]) {
              spanArr[spanIndex] += 1;
              spanArr.push(0);
            } else {
              spanArr.push(1);
              spanIndex = i;
            }
          }
        }
        return spanArr;
      }
    },

附:常見合並key,讀取value與num

    //計算相同key的數量num:{value:num},value是內容
    handleSpand(data,key) {
      let obj = {};
      data.forEach(val => {
        if (obj[val.key]) {
          obj[val.key]++;
        } else {
          obj[val.key] = 1;
        }
      });
      return obj;
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM