Vue父组件调用子组件设置table表格合并

父组件控制合并函数办法

父组件

<CreateTableComp ref="table" style="margin-top: 15px;" @handleClick="handleClick" 
                 :urls="urls" :baseTable="baseTable"
                 delName="username"
                 :tableData.sync="tableData"
                 :arraySpanMethod="arraySpanMethod">
</CreateTableComp>

子组件 CreateTableComp

props: {
    // 合并单元格
    arraySpanMethod: {
      type: Function,
      default: () => {}
    }
}

<el-table :data="tableData || []" fit highlight-current-row 
          :span-method="arraySpanMethod"
          :size="baseTableData.size || 'small'"
          v-if="showTable"
          :border="baseTableData.border">
</table>

使用 props 父组件传函数到子组件，达到使用合并函数的办法。

合并逻辑

// 合并行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  // 只对某一列（如 category 列，columnIndex === 1）进行合并
  if (columnIndex === 1) {
    const prop = column.property; // 获取列属性名

    // 判断是否是当前分组的第一行（第一行或与上一行不同）
    if (rowIndex === 0 || row[prop] !== this.tableData[rowIndex - 1]?.[prop]) {
      // 计算当前值需要合并的行数
      let rowspan = 1;
      for (let i = rowIndex + 1; i < this.tableData.length; i++) {
        if (row[prop] === this.tableData[i][prop]) {
          rowspan++; // 统计连续相同的行数
        } else {
          break; // 遇到不同值就停止
        }
      }
      return [rowspan, 1]; // 第一行合并 rowspan 行
    } else {
      return [0, 1]; // 其余相同行隐藏
    }
  }

  return [1, 1]; // 其他列不合并
},

数组中的 0 表示隐藏行或者列。

思路：1. 先获取表格的所有数据 this.tableData ; 2. 确定要修改的列；3. 设置行合并判断条件；4. 设置初始值，检查tableData里的数据是否相同，修改统计变量实现合并。