ElementUI+VUE el-table多列跨行合并单元格

在ElementUI的el-table组件中实现多列跨行合并的单元格，你需要使用span-method属性。该属性接受一个方法，这个方法返回一个包含两个元素的数组：行跨度和列跨度。

以下是一个简单的例子，展示了如何使用span-method来合并多列跨行的单元格：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :span-method="mergeCells"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        },
        // ... 更多数据
      ]
    };
  },
  methods: {
    mergeCells(rowIndex, columnIndex) {
      if (columnIndex === 0) {
        // 根据业务逻辑合并单元格
        if (rowIndex % 2 === 0) {
          return [2, 1]; // 表示该单元格行跨度为2，列跨度为1
        } else {
          return [0, 0]; // 不合并单元格
        }
      }
    }
  }
};
</script>

在这个例子中，mergeCells方法会在rowIndex为偶数时合并前两行的第一列单元格。这意味着日期列的每隔一行的单元格会合并。你可以根据实际的业务需求调整合并逻辑。