表格-行的合并（根据指定的相同数据合并行）

场景：根据相同的数据来合并行，要达到的效果是这样的：

image.png

我们根据相同的name进行表格的行合并，表格数据是这样的：

let data = [
  {
    id: "1122",
    name: "刘某某",
    text: "text",
  },
  {
    id: "2233",
    name: "王某某",
    text: "text",
  },
  {
    id: "3344",
    name: "李某某",
    text: "text",
  },
  {
    id: "4455",
    name: "刘某某",
    text: "text",
  },
];

（这里使用的是ant-design-vue组件，其他组件也可复用，代码逻辑是一样的）

1.封装好方法：

// 专门通过重复key去计算出重复key的数量的方法，用于表格 行 的合并
function repeatKeyNumberMapFun(list, repeatKey) {
  // 按照特定的参数将数组有相同值的排在一起
  const sortByRepeatKey = (list, repeatKey) => {
    return list.sort((a, b) => {
      return a[repeatKey] < b[repeatKey] ? -1 : 1;
    });
  };
  const repeatKeyNumberMap = {};
  if (repeatKey) {
    sortByRepeatKey(list, repeatKey).forEach((item, index) => {
      const repeatKeyValue = item[repeatKey];
      // item.name是存在重复值的那个key，list里面的name是会重复的，并且要以name合并
      /**
     * 专门通过重复key去计算出重复key的数量
     * repeatKeyNumberMap格式为: {
     *  重复key: {
          number: 1 // 当前重复key-重复的数量
          preRepeatKey: "2233" // 上一个重复key-的值
          preRepeatKeyNum: 2 // 上一个重复key-重复的数量
          indexNum: 2 //重复key第一次出现时的下标
     *  }
     * }
     */
      if (repeatKeyNumberMap[repeatKeyValue]) {
        repeatKeyNumberMap[repeatKeyValue].number =
          repeatKeyNumberMap[repeatKeyValue].number + 1;
      } else {
        const preRepeatKeyValue = list[index - 1]?.[repeatKey];
        repeatKeyNumberMap[repeatKeyValue] = {
          number: 1,
          preRepeatKey: preRepeatKeyValue,
          preRepeatKeyNum: preRepeatKeyValue
            ? repeatKeyNumberMap[preRepeatKeyValue].number
            : 0,
          indexNum: preRepeatKeyValue
            ? repeatKeyNumberMap[preRepeatKeyValue].indexNum
            : 0,
        };
      }

      if (list[index + 1]?.[repeatKey] !== repeatKeyValue) {
        repeatKeyNumberMap[repeatKeyValue].indexNum =
          repeatKeyNumberMap[repeatKeyValue].indexNum +
          repeatKeyNumberMap[repeatKeyValue].preRepeatKeyNum;
      }
    });
  }
  return repeatKeyNumberMap;
}

2.给方法传值，方便拿出来使用

// name是你需要合并的数据的key值，这里我们要合并的是数据的name
// data是你要合并的数据组
this.repeatKeyNumberMap = this.repeatKeyNumberMapFun(data, "name");

3.页面使用

// 合并行/列
customRenderFun(value, row, index) {
  // obj是ant-design-vue组件合并表格需要的数据结构
  // 可根据你使用的组件自行定义你的数据结构
  const obj = {
      children: value,
        attrs: {},
  };
  if (this.repeatKeyNumberMap[row.name]) {
    const { number, indexNum } = this.repeatKeyNumberMap[row.name];
    // 如果下标等于你需要合并的下标，那么就合并
    if (index === indexNum) {
        obj.attrs = {
        // 合并行
        rowSpan: number,
        // 合并列
        colSpan: 1,
        };
    // 如果下标不等于你需要合并的下标，那么就行和列都为0
    } else {
      obj.attrs = {
        rowSpan: 0,
        colSpan: 0,
      };
    }
  }
  return obj;
},

4.放到表格头数据上面

哪一列需要合并行 就放到那一列，我们这里需要放到名称那一列

const columns = [
  {
    title: 'ID',
    dataIndex: ' id',
    key: 'id',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    customRender: (value, row, index) => {
      return this.customRenderFun(value, row, index);
    },
  },
  {
    title: '内容',
    dataIndex: 'text',
    key: 'text',
  },
];