自定义合并列: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;
    },

 

上一篇:Android真机调试手动添加程序包的LogCat


下一篇:如何让elemengUI中的表格组件相同内容的单元格自动合并