elementui 合并动态表头如何操作

如果你需要合并 ElementUI 表格中的动态表头，可以使用 `span-method` 属性来实现。 首先，在表格组件中定义 `span-method` 方法。该方法接受两个参数：`{ row, column, rowIndex, columnIndex }`，其中 `row` 是当前单元格所在的行数据，`column` 是当前单元格所在的列数据，`rowIndex` 是当前单元格所在的行索引，`columnIndex` 是当前单元格所在的列索引。在这个方法中，你可以根据需要返回一个对象，来定义当前单元格需要跨越的行数和列数。 例如，以下代码将合并第一行的第一列和第二列： ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column v-for="item in tableHeader" :key="item.prop" :label="item.label" :prop="item.prop"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableHeader: [ { label: '姓名', prop: 'name' }, { label: '基本信息', children: [ { label: '年龄', prop: 'age' }, { label: '性别', prop: 'gender' } ] }, { label: '联系方式', children: [ { label: '手机', prop: 'mobile' }, { label: '邮箱', prop: 'email' } ] } ], tableData: [ { name: '张三', age: 18, gender: '男', mobile: '13800138000', email: '[email protected]' }, { name: '李四', age: 20, gender: '女', mobile: '13900139000', email: '[email protected]' } ] } }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex === 0 && columnIndex === 0) { return { rowspan: 1, colspan: 2 }; } else if (rowIndex === 0 && columnIndex === 1) { return { rowspan: 1, colspan: 0 }; } } } } </script> ``` 在上述代码中，`handleSpanMethod` 方法中判断当前单元格是否是第一行第一列或第一行第二列，如果是，则返回合并的行数和列数。其中，`rowspan` 表示需要跨越的行数，`colspan` 表示需要跨越的列数。在本例中，第一行第一列需要跨越一行两列，而第一行第二列不需要显示，所以 `colspan` 为 0。