elementui怎样纵向合并单元格

Element UI 的表格（el-table）默认是按行显示数据，如果需要实现纵向合并单元格，可以借助 `cell` 中的 `span-method` 属性以及自定义的 `mergeHeader` 和 `mergeFooter` 函数来实现。这是一个简单的例子：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名">
      <template slot-scope="scope">
        <!-- 使用 span-method 来合并单元格 -->
        <div v-if="shouldMerge(scope.$index)" style="white-space: nowrap; overflow: hidden;">
          {{ scope.row.name }}
        </div>
        <div v-else>{{ scope.row.name }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '01', name: '张三' },
        { date: '01', name: '李四' },
        { date: '02', name: '王五' },
        { date: '02', name: '赵六' },
      ],
    };
  },
  methods: {
    shouldMerge(index) {
      // 根据业务需求编写合并规则，这里举例按日期合并
      const dates = this.tableData.slice(0, index + 1).map(item => item.date);
      if (dates.length > 1 && dates[dates.length - 1] === dates[dates.length - 2]) {
        return true;
      }
      return false;
    },
    mergeHeader(row, column) {
      // 可选的合并表头函数
      // 如果需要合并表头，也可以在这里处理
    },
    mergeFooter(row, column) {
      // 可选的合并表尾函数
    },
  },
};
</script>

在这个例子中，`shouldMerge` 函数根据索引判断当前行是否应该合并。然后在模板中使用 `<div>` 组件包裹 `name` 列的内容，并利用 CSS 控制样式。