动态合并单元格

搬运地址

antd-vue之table合并单元格

使用

 // 合并单元格，这里我抽出了一个函数，调用的时候只需要将dataIndex作为参数传入即可
    rowSpan(key) {
      let arr = this.data //表格数据
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key]);
          }
          return result;
        }, [])
        .reduce((result, keys) => {
          const children = this.data.filter((item) => item[key] === keys);
          result = result.concat(
              //给每个第一项添加重复的次数，之后的项赋值'' 使用typeof 判断
            children.map((item, index) => ({
              ...item,
              rowSpan: index === 0 ? children.length : '',
            }))
          );
          return result;
        }, []);
      this.data = arr;
    }

注：可以看到上面的rowSpan函数进行了两次reduce（归并），第一次是为了去重，返回一个去重的key的数组。第二次reduce是为了找出每个key重复的次数，并且将重复的次数记录在data数组中的的每个对象中，后面用于合并单元格