el-table 合并行操作
时间: 2023-11-11 20:59:56 浏览: 147
el-table合并列 合并单元格
要合并 el-table 的行,可以使用 el-table 的 slot-scope 属性和 rowspan 属性来实现。具体步骤如下:
1. 在 el-table 中设置 slot-scope 属性,指定要合并的列的名称。
2. 在 el-table-column 中设置 rowspan 属性,指定要合并的行数。
3. 在 slot-scope 中使用 v-if 判断当前行是否需要合并,如果需要则返回一个空的 td 元素,否则返回当前列的值。
示例代码如下:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址" :rowspan="2"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<template slot-scope="{ row, $index }" v-if="$index % 2 === 0">
<td></td>
</template>
</el-table>
```
阅读全文