el-table表格动态合并行、合并行列及详解_el-table 合并行

在Element UI中，el-table组件支持通过rowspan和colspan属性来动态合并单元格。以下是一个简单的例子，展示了如何在el-table中合并行和列：

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      v-for="item in tableLabel"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :span-method="mergeSlot"
    >
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'Tom', address: 'No.1' },
        { date: '2016-05-02', name: 'Tom', address: 'No.2' },
        { date: '2016-05-03', name: 'Jerry', address: 'No.1' },
        { date: '2016-05-03', name: 'Jerry', address: 'No.2' },
      ],
      tableLabel: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
      ],
    };
  },
  methods: {
    mergeSlot({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return [1, 2]; // 第一个参数代表rowspan，第二个参数代表colspan
        } else {
          return [0, 0];
        }
      }
    },
  },
};
</script>

在这个例子中，我们定义了一个tableData数组作为el-table的数据源，并定义了一个tableLabel数组来动态生成列。mergeSlot方法是通过span-method属性传递给el-table-column的，该方法负责返回单元格的合并信息。在这个例子中，我们合并了第一列（日期）的相同单元格，使得每两行合并成一行。这是通过检查行索引rowIndex是否为偶数来实现的。