【vue+Element】el-table表格合并单元格

在Vue中使用Element UI的el-table组件进行表格合并单元格，可以通过el-table-column的scoped-slot属性配合template使用。

以下是一个简单的例子，展示了如何合并表格的第一列的单元格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <el-table-column
          prop="date"
          label="日期"
          width="180"
          :render-header="renderHeader">
        </el-table-column>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No.189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No.189, Grove St, Los Angeles'
        },
        // ...更多数据
      ]
    };
  },
  methods: {
    renderHeader(h, { column, $index }) {
      // 如果是第一列，则进行合并
      if ($index === 0) {
        return [
          h('el-table-column', {
            attrs: {
              label: column.label,
              width: column.width
            },
            // 指定合并行或列
            style: {
              'text-align': 'center',
              'background-color': '#f0f0f0'
            }
          })
        ];
      }
    }
  }
};
</script>

在这个例子中，我们使用了renderHeader方法来渲染表头，并通过判断当前列的索引来决定是否进行合并。如果是第一列，我们返回一个新的el-table-column，并设置合适的样式来实现单元格的合并。

请注意，实际的合并单元格操作是Element UI内部处理的，你只需要通过这种方式指定哪些列需要被合并即可。