Ant design for Vue的table的行合并、列合并、行列合并的代码实现

列合并 

/** 列合并
 * @author lyn
 * @date 2022/8/3 15:28
 * @param mergerFields：需要判断的字段名称集合（可以合并的列的名称）
 * @param row：当前行的值
 * @return 最后得到类似这样的数据“{name:1,phone:2,tel:0,address:1}”这样的数据（key就是字段名称，value就是需要合并的列数，其中value值为0时就是被前面合并了）
 */
function customRenderMergerCol(mergerFields, currentField, row) {
  const mergerColDic = {};
  // 目标字段默认是第一个字段名称
  let [targetField] = mergerFields;
  // 遍历所有需要合并时单元格数据相同的字段名称
  mergerFields.forEach((field, index) => {
    // 跳过不需要判断的字段名称（因为这个字段名称的单元格已经和前面的单元格合并了）
    if (targetField === field) {
      // 当前遍历的字段的值
      const currentFieldValue = row[field];
      // 如果当前字段的数据还没有被添加
      if (!mergerColDic[field]) {
        mergerColDic[targetField] = 1;
      }

      // 只循环当前索引后面的合并字段名称（这里是要统计判断和当前这个字段名称的单元格的值相同的需要合并的字段的单元格值有几个）
      // 目的就是找到和当前字段名称单元格值连续相同的单元格数量
      for (const fieldName of mergerFields.slice(index + 1, mergerFields.length)) {
        // 判断后面的字段名称的值和上面循环的值是否相同
        if (row[fieldName] == currentFieldValue) {
          mergerColDic[field] += 1;// 统计值加一
          mergerColDic[fieldName] = 0;// 后面的这个字段也只能设为0（因为它要被合并到前面和它单元格值相同的单元格）