要合并行的话,你可以使用 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(第一列),然后根据当前行索引返回不同的合并行配置。在该例子中,我们合并了第一列中相同值的行

vxe 表格 合并行完整代码

原文地址: http://www.cveoy.top/t/topic/hXEw 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录