el-table同时存在横竖表头
时间: 2023-07-18 11:40:58 浏览: 77
el-table同时存在横竖表头的实现方式,可以在纵向表头中加入横向表头的模板,在横向表头模板中加入纵向表头的模板,例如:
```html
<el-table :data="tableData" style="width: 100%">
<template slot="header">
<thead>
<tr>
<th rowspan="2">姓名</th>
<th colspan="3">上午</th>
<th colspan="3">下午</th>
</tr>
<tr>
<th>9:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>1:00-2:00</th>
<th>2:00-3:00</th>
<th>3:00-4:00</th>
</tr>
<tr>
<th>基本信息</th>
<template v-for="col in 6">
<th>{{ col }}</th>
</template>
</tr>
</thead>
</template>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="上午" align="center">
<el-table-column label="9:00-10:00" prop="am9"></el-table-column>
<el-table-column label="10:00-11:00" prop="am10"></el-table-column>
<el-table-column label="11:00-12:00" prop="am11"></el-table-column>
</el-table-column>
<el-table-column label="下午" align="center">
<el-table-column label="1:00-2:00" prop="pm1"></el-table-column>
<el-table-column label="2:00-3:00" prop="pm2"></el-table-column>
<el-table-column label="3:00-4:00" prop="pm3"></el-table-column>
</el-table-column>
</el-table>
```
在横向表头的第三行中,加入了一个基本信息的单元格,作为纵向表头的第一列,用于展示姓名和地址两列的表头。同时,在纵向表头的模板中,也需要加入横向表头的模板,用于展示上午和下午两行的表头。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)