el-table多级表头渲染
时间: 2023-11-11 12:58:47 浏览: 45
可以使用 el-table 的 column 属性来实现多级表头渲染。具体步骤如下:
1. 在 el-table-column 中设置 prop 属性,用于指定该列对应数据源中的字段名。
2. 在 el-table-column 中设置 label 属性,用于指定该列的表头名称。
3. 在 el-table-column 中设置 children 属性,用于指定该列下的子列。
4. 在子列中重复以上步骤,直到达到所需的表头层级。
示例代码如下:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="联系方式">
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
</el-table-column>
<el-table-column label="地址">
<el-table-column prop="province" label="省份"></el-table-column>
<el-table-column prop="city" label="城市"></el-table-column>
<el-table-column prop="address" label="详细地址"></el-table-column>
</el-table-column>
</el-table>
```