vxe 表格 合并行完整代码
要合并行的话,你可以使用 vxe-table 组件提供的 span-method 属性来实现。下面是一个简单的例子,展示如何在表格中合并行:
<template>
<vxe-table
:data="tableData"
:span-method="spanMethod"
>
<vxe-table-column type="seq" title="序号"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="age" title="年龄"></vxe-table-column>
<vxe-table-column field="gender" title="性别"></vxe-table-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '男' },
{ name: '王五', age: 18, gender: '男' },
{ name: '赵六', age: 18, gender: '女' },
{ name: '钱七', age: 20, gender: '女' },
]
}
},
methods: {
spanMethod({ row, rowIndex, column, columnIndex }) {
if (columnIndex === 0) {
// 合并第一列的相同值的行
if (rowIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex === 1) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
</script>
在上面的代码中,spanMethod 方法用于指定如何合并行。在该方法中,我们判断当前列索引是否为 0(第一列),然后根据当前行索引返回不同的合并行配置。在该例子中,我们合并了第一列中相同值的行
原文地址: http://www.cveoy.top/t/topic/hXEw 著作权归作者所有。请勿转载和采集!