自定義合併列: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與numthis

    //計算相同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;
    },
相關文章
相關標籤/搜索