el-table 合并单元格
时间: 2024-05-31 22:06:25 浏览: 117
使用VUE的el-table标签的_span-method=_arraySpanMethod_合并列中重复的单元格.md
el-table 是基于 Element UI 的表格组件,支持合并单元格的功能。合并单元格可以使表格数据更加直观、易读,并且减少了重复信息的显示,提高了表格数据的展示效率。
在 el-table 中,合并单元格可以通过配置 span-method 方法来实现。span-method 方法需要返回一个对象,该对象包含两个属性:rowspan 和 colspan,分别表示要合并的行数和列数。
下面是一个简单的示例代码:
```html
<template>
<el-table :data="tableData" :span-method="handleSpanMethod">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 18,
gender: '男',
address: '北京市朝阳区'
},
{
name: '李四',
age: 22,
gender: '女',
address: '上海市浦东新区'
},
{
name: '王五',
age: 30,
gender: '男',
address: '广州市天河区'
},
{
name: '赵六',
age: 25,
gender: '女',
address: '深圳市南山区'
}
]
}
},
methods: {
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) { // 第偶数行
if (columnIndex === 2) { // 第三列
return {
rowspan: 2,
colspan: 1
}
}
}
}
}
}
</script>
```
在上面的示例代码中,handleSpanMethod 方法返回一个对象,当满足 rowIndex 为偶数且 columnIndex 为2时,将第三列的单元格合并两行。
阅读全文