vxe-table如何设置多级表头,代码展示
时间: 2023-03-31 14:01:27 浏览: 198
您好,关于vxe-table如何设置多级表头,可以使用header-rows属性来实现。具体代码如下:
```
<template>
<vxe-table :data="tableData" :header-rows="headerRows"></vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市海淀区' },
{ name: '李四', age: 22, address: '上海市浦东新区' },
{ name: '王五', age: 30, address: '广州市天河区' }
],
headerRows: [
[
{ title: '姓名', key: 'name', rowspan: 2 },
{ title: '基本信息', key: 'info', colspan: 2 }
],
[
{ title: '年龄', key: 'age' },
{ title: '地址', key: 'address' }
]
]
}
}
}
</script>
```
在headerRows中定义多个数组,每个数组表示一行表头,每个表头对象可以设置title、key、rowspan和colspan属性,其中title表示表头名称,key表示对应的数据字段,rowspan表示跨行数,colspan表示跨列数。这样就可以实现多级表头的效果了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)