el-table补全空白行
时间: 2023-12-27 16:24:07 浏览: 41
el-table补全空白行的方法如下:
1. 使用colspan属性补全空白列:
在el-table中,可以使用colspan属性来合并单元格,从而补全空白列。通过设置colspan的值为需要合并的列数,可以将多个单元格合并为一个单元格,从而填充空白列。
```html
<el-table>
<el-table-column label="姓名"></el-table-column>
<el-table-column label="年龄"></el-table-column>
<el-table-column label="性别" :colspan="2"></el-table-column> <!-- 合并两个空白列 -->
<el-table-column label="地址"></el-table-column>
</el-table>
```
2. 使用rowspan属性补全空白行:
类似地,可以使用rowspan属性来合并单元格,从而补全空白行。通过设置rowspan的值为需要合并的行数,可以将多个单元格合并为一个单元格,从而填充空白行。
```html
<el-table>
<el-table-column label="姓名"></el-table-column>
<el-table-column label="年龄"></el-table-column>
<el-table-column label="性别"></el-table-column>
<el-table-column label="地址"></el-table-column>
</el-table>
<el-table>
<el-table-column label="姓名"></el-table-column>
<el-table-column label="年龄"></el-table-column>
<el-table-column label="性别"></el-table-column>
<el-table-column label="地址"></el-table-column>
</el-table>
<el-table>
<el-table-column label="姓名"></el-table-column>
<el-table-column label="年龄"></el-table-column>
<el-table-column label="性别" :rowspan="2"></el-table-column> <!-- 合并两个空白行 -->
<el-table-column label="地址"></el-table-column>
</el-table>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)