場(chǎng)景：根據(jù)相同的數(shù)據(jù)來(lái)合并行醉冤，要達(dá)到的效果是這樣的：

image.png

我們根據(jù)相同的name進(jìn)行表格的行合并，表格數(shù)據(jù)是這樣的：

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組件看锉，其他組件也可復(fù)用巫延，代碼邏輯是一樣的）

1.封裝好方法：

// 專門通過(guò)重復(fù)key去計(jì)算出重復(fù)key的數(shù)量的方法，用于表格 行 的合并
function repeatKeyNumberMapFun(list, repeatKey) {
  // 按照特定的參數(shù)將數(shù)組有相同值的排在一起
  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是存在重復(fù)值的那個(gè)key，list里面的name是會(huì)重復(fù)的，并且要以name合并
      /**
     * 專門通過(guò)重復(fù)key去計(jì)算出重復(fù)key的數(shù)量
     * repeatKeyNumberMap格式為: {
     *  重復(fù)key: {
          number: 1 // 當(dāng)前重復(fù)key-重復(fù)的數(shù)量
          preRepeatKey: "2233" // 上一個(gè)重復(fù)key-的值
          preRepeatKeyNum: 2 // 上一個(gè)重復(fù)key-重復(fù)的數(shù)量
          indexNum: 2 //重復(fù)key第一次出現(xiàn)時(shí)的下標(biāo)
     *  }
     * }
     */
      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.給方法傳值，方便拿出來(lái)使用

// name是你需要合并的數(shù)據(jù)的key值战得，這里我們要合并的是數(shù)據(jù)的name
// data是你要合并的數(shù)據(jù)組
this.repeatKeyNumberMap = this.repeatKeyNumberMapFun(data, "name");

3.頁(yè)面使用

// 合并行/列
customRenderFun(value, row, index) {
  // obj是ant-design-vue組件合并表格需要的數(shù)據(jù)結(jié)構(gòu)
  // 可根據(jù)你使用的組件自行定義你的數(shù)據(jù)結(jié)構(gòu)
  const obj = {
      children: value,
        attrs: {},
  };
  if (this.repeatKeyNumberMap[row.name]) {
    const { number, indexNum } = this.repeatKeyNumberMap[row.name];
    // 如果下標(biāo)等于你需要合并的下標(biāo)，那么就合并
    if (index === indexNum) {
        obj.attrs = {
        // 合并行
        rowSpan: number,
        // 合并列
        colSpan: 1,
        };
    // 如果下標(biāo)不等于你需要合并的下標(biāo)庸推，那么就行和列都為0
    } else {
      obj.attrs = {
        rowSpan: 0,
        colSpan: 0,
      };
    }
  }
  return obj;
},

4.放到表格頭數(shù)據(jù)上面

哪一列需要合并行 就放到那一列常侦，我們這里需要放到名稱那一列

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