Vue3 中 el-table 多表头及表格行或列合并代码示例

在 Vue3 项目开发中，经常会用到 el-table 组件来展示数据表格。而有时，我们可能需要实现多表头以及表格行或列的合并，以满足特定的业务需求。下面将为您详细介绍相关的代码实现。

确保您已经在项目中正确引入了 Element Plus 库，并且在组件中使用了 el-table 组件。

对于多表头的实现，我们可以通过设置 el-table-column 组件的 span-method 属性来定义表头的合并逻辑。以下是一个示例代码：

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      label="姓名"
      prop="name"
      :span-method="handleSpan"
    />
    <el-table-column label="年龄" prop="age" />
    <el-table-column label="性别" prop="gender" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ],
    };
  },
  methods: {
    handleSpan({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

在上述代码中，handleSpan 方法根据行和列的索引来决定表头的合并方式。

对于表格行或列的合并，同样可以通过类似的方式来处理。假设我们要合并第一列的前两行数据，示例代码如下：

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="年龄" prop="age" />
    <el-table-column label="性别" prop="gender" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ],
    };
  },
  methods: {
    rowMerge({ row, rowIndex }) {
      if (rowIndex === 0) {
        return {
          rowspan: 2,
        };
      }
    },
  },
};
</script>

在实际开发中，您可以根据具体的业务需求灵活调整合并的逻辑和样式。

通过以上示例，您应该对 Vue3 中 el-table 的多表头及表格行或列合并有了一定的了解和认识。希望您能在项目中顺利运用这些技术，实现更加丰富和复杂的数据展示效果。