vue +element ui table 单元格合并代码
时间: 2023-10-11 17:08:44 浏览: 114
要实现 Element UI Table 单元格的合并,可以使用 Element UI 提供的 `span-method` 属性。具体实现代码如下:
```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>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '张三',
age: 18,
gender: '男'
}, {
name: '李四',
age: 20,
gender: '女'
}, {
name: '王五',
age: 22,
gender: '男'
}]
}
},
methods: {
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
</script>
```
在 `handleSpanMethod` 方法中,我们可以根据当前单元格的行索引和列索引来判断是否需要进行合并,返回一个对象,分别指定行合并数量和列合并数量即可。在上面的例子中,我们实现了将第一列的相邻两行进行合并的效果。
阅读全文