vue+elementUI 合并行3

发布时间 2023-06-03 09:51:45作者: 七仔_93

1、返回数据为一维数组

getData() {
 that.tableData = res.data.data.list;
}

2、合并函数

挂在vue底层:
Vue.prototype.$spanMethodFunc=function(list, props, row, col) 
写在method内:
spanMethodFunc(list, props, row, col) {
      if (col >= props.length || !props[col]) {
        // console.log(123)
        // 根据传入的字段列表,判断不需要合并的列
        return [1, 1];
      } else {
        //使用try-catch,如果方法错误返回错误信息
        try {
          let _props = props.slice(0, col + 1); //截取需要用到判断的字段名
          // 判断是否从本行开始合并
          let merge = _props.some(item => {
            // console.log(list[row])

            // 如果当前行所需要判断合并的字段中有一个跟前一条数据不一样,本条数据即为合并的起点,第一条数据直接为合并起点
            return row == 0 || (item && list[row][item] != list[row - 1][item]);
          });
          // 如果本条数据是合并起点,获取需要合并的数据条数
          // console.log(merge)
          if (merge) {
            let _list = list.slice(row); //截取从本条数据开始的列表
            // 获取合并行数
            let _lineNum = _list.findIndex((item, ind) => {
              //同merge判断,找到合并的终点
              return (
                ind &&
                _props.some(item1 => {
                  return item1 && item[item1] != _list[0][item1];
                })
              );
            });
            // 合并行数为-1时,输出_list的长度,否则输出_lineNum
            return [_lineNum === -1 ? _list.length : _lineNum, 1];
          } else {
            // 否则,返回[0,0],即本条数据被合并
            return [0, 0];
          }
        } catch (err) {
          // 打印报错
          console.error("spanMethodFunc error:", err);
        }
      }
    },

  3、调用合并

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let propSpan = [
        "id",
        "company",
        "contractId"
      ];
//例如:[“id”,“”“contractId”] return this.spanMethodFunc( this.tableData, propSpan, rowIndex, columnIndex ); },