当前位置：首页 > 前端教程

elementui合并

2026-03-06 04:27:47前端教程

合并单元格的方法

在Element UI中，可以通过el-table的span-method属性实现单元格合并。该属性接收一个函数，用于计算行或列的合并方式。

示例代码：

elementui合并

<template>
  <el-table
    :data="tableData"
    :span-method="objectSpanMethod"
    border
    style="width: 100%">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="amount" label="Amount"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: '1', name: 'Apple', amount: '10' },
        { id: '1', name: 'Apple', amount: '20' },
        { id: '2', name: 'Banana', amount: '30' },
        { id: '3', name: 'Orange', amount: '40' }
      ]
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 合并 ID 和 Name 列
        if (rowIndex === 0) {
          return { rowspan: 2, colspan: 1 };
        } else if (rowIndex === 1) {
          return { rowspan: 0, colspan: 0 };
        }
      }
    }
  }
};
</script>

动态合并单元格

如果需要根据数据动态合并单元格，可以预先计算合并规则。

动态合并示例：

elementui合并

methods: {
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      // 根据 ID 合并
      const sameIdRows = this.tableData.filter(item => item.id === row.id);
      if (rowIndex === this.tableData.findIndex(item => item.id === row.id)) {
        return { rowspan: sameIdRows.length, colspan: 1 };
      } else {
        return { rowspan: 0, colspan: 0 };
      }
    }
  }
}

合并表头

Element UI 的 el-table 支持通过 el-table-column 嵌套实现表头合并。

表头合并示例：

<el-table :data="tableData" border>
  <el-table-column label="Group">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
  </el-table-column>
  <el-table-column prop="amount" label="Amount"></el-table-column>
</el-table>

通过以上方法，可以实现单元格和表头的灵活合并。

标签: elementui