el-table多级表头合并单元格
时间: 2023-08-19 08:07:01 浏览: 64
对于 el-table 组件,可以通过设置表头的 column 对象的 span 属性来合并单元格。span 属性可以设置为一个对象,包含两个属性:row 和 col,分别表示纵向和横向的合并单元格数量。
以下是一个示例代码,演示了如何在 el-table 中实现多级表头的单元格合并:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="一级表头" prop="name" :span="{ row: 2, col: 1 }"></el-table-column>
<el-table-column label="二级表头" :span="{ row: 1, col: 2 }"></el-table-column>
<el-table-column label="三级表头" prop="age" :span="{ row: 1, col: 2 }"></el-table-column>
<el-table-column label="四级表头" prop="address" :span="{ row: 1, col: 2 }"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John',
age: 20,
address: 'New York'
},
{
name: 'Jane',
age: 25,
address: 'London'
}
]
};
}
};
</script>
```
在这个示例中,我们使用了 el-table 组件,并设置了四个表头,分别是"一级表头"、"二级表头"、"三级表头"和"四级表头"。通过设置每个表头的 span 属性,指定了单元格的合并方式。
注意,设置 span 属性的时候,row 和 col 的值分别代表纵向和横向的合并单元格数量。