Element UI 表格单元格及表头单元格合并操作指南

Element UI 是一个开源的前端框架，它为 Vue.js 开发者提供了丰富的组件和工具，其中就包括表格组件。Element UI 表格组件提供了强大的功能和丰富的自定义选项，可以满足各种业务场景的需要。

表格单元格合并是指将两个或多个相邻的单元格合并成一个单元格，以便显示更长的内容或更复杂的数据。Element UI 表格组件提供了 span-method 属性来实现单元格合并。

表头单元格合并是指将两个或多个相邻的表头单元格合并成一个单元格，以便显示更长的标题或更复杂的信息。Element UI 表格组件没有提供直接的属性来实现表头单元格合并，但可以通过修改样式来实现。

单元格合并

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址" :span-method="spanMethod"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 22,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 25,
          address: '广州市天河区'
        }
      ]
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 3
      } else {
        return 1
      }
    }
  }
}
</script>

在这个例子中，我们使用 spanMethod 属性来实现单元格合并。spanMethod 属性是一个函数，它接收四个参数：row、column、rowIndex 和 columnIndex。在函数中，我们可以根据需要返回单元格的合并跨度。

在上面的例子中，我们在 spanMethod 函数中判断如果当前行是第一行，则将单元格的跨度设置为 3，否则将单元格的跨度设置为 1。这样，第一行的所有单元格都会被合并成一个单元格，而其他行的单元格则保持不变。

表头单元格合并

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址">
      <template slot="header">
        <div style="width: 100px;">详细地址</div>
        <div style="width: 100px;">邮编</div>
      </template>
    </el-table-column>
  </el-table>
</template>

在这个例子中，我们通过修改样式来实现表头单元格合并。我们在 address 列的 header 插槽中定义了两个 div 元素，并设置了它们的宽度。这样，这两个 div 元素就会并排显示，并且占据整个 address 列的宽度。

我们还可以使用 CSS 来实现表头单元格合并。例如，我们可以使用 colspan 属性来指定单元格的跨度。

<style>
  .el-table-header th[colspan="2"] {
    width: 200px;
  }
</style>

在这个例子中，我们将 address 列的表头单元格的跨度设置为 2，并设置了它的宽度为 200px。这样，address 列的表头单元格就会合并成一个单元格，并且占据两列的宽度。

Element UI 表格组件的单元格合并和表头单元格合并功能非常强大，可以满足各种业务场景的需要。通过合理地使用这些功能，我们可以创建出更加美观和易用的表格。