el-table 合并单元格动态

`el-table` 是 Element UI 提供的一个表格组件，在 Vue.js 中常用于展示数据列表。合并单元格功能在 `el-table` 中可以通过 `rowspan` 和 `colspan` 属性来实现。动态合并单元格意味着可以根据数据的变化实时调整这些属性。

例如，如果你有一个数组表示行的合并规则，你可以这样做：

<template>
  <el-table :data="tableData">
    <el-table-column type="index" />
    <el-table-column prop="name" label="姓名" width="180" />
    <!-- 其他列 -->

    <el-table-row v-for="(item, index) in tableData" :key="index">
      <el-table-cell v-if="!item.isMerge">显示单元格</el-table-cell>
      <el-table-cell :rowspan="item.rowspan" :colspan="item.colspan"
        v-else>合并单元格内容</el-table-cell>
    </el-table-row>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', isMerge: true, rowspan: 2, colspan: 2 },
        { name: '李四', isMerge: false },
        { name: '王五', isMerge: true, rowspan: 1, colspan: 3 }
      ]
    };
  }
};
</script>

在这个例子中，`isMerge` 字段标识是否需要合并单元格，`rowspan` 和 `colspan` 分别表示行和列的跨越范围。当 `isMerge` 为真时，对应的单元格会合并。通过绑定到数据驱动的数据源上，你可以轻松地控制单元格的合并情况。