el-table合并一列中数据相同的单元格

html相关代码

        即普通的ElementUI的表格插件传入span-method方法:


    
    
    
    
    
    

js相关代码

        span-method方法绑定的objectSpanMethod函数中对数据进行处理:

export default {
  data() {
    return {
       tableData: [],
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //columnIndex 表示需要合并的列,多列时用 || 隔开
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.filterData(this.tableData, columnIndex).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    filterData(arr, colIndex) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index == 0) {
          spanOneArr.push(1);
        } else {
           //class 和classify 分别表示表格数据第一列和第二列对应的参数字段,根据实际参数修改
          if (colIndex == 0) {
            if (item.class === arr[index - 1].class) {
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);  
              concatOne = index;
            }
          } else {
            if (item.classify === arr[index - 1].classify) {
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);  
              concatOne = index;
            } 
          }
        }
      });
      return {
        one: spanOneArr,
      };
    }
  }
}

你可能感兴趣的:(vue+elementUi,js,javascript)