vxe-table 多列合并

vxe-table 多列合并 官方网站的是不管你第一列合第二列有没有联系,他是竖向合并,只要相同就合并。

本文改成 会在第一列的基础上,在合并第二列。

代码比较繁琐,有好的推荐联系我。
在这里插入图片描述

在这里插入图片描述

mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
      const fields = ['year', 'ji']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (column.property == 'year') {
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.property] === cellValue) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        } else if (column.property == 'ji') {
          if (prevRow && prevRow[column.property] === cellValue && prevRow.year == row.year) {
            return { rowspan: 0, colspan: 0 }
          } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.property] === cellValue && nextRow.year == row.year) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      }
    },

展示效果
在这里插入图片描述

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vxe-table支持合并列,可以通过设置表头的 `children` 属性来实现。具体操作步骤如下: 1. 在表头中设置 `children` 属性,用于定义需要合并的列。 2. 在表格中使用 `span-method` 属性来指定合并规则。 以下是一个示例代码: ```html <template> <vxe-table :data="tableData"> <vxe-table-column type="seq" width="60"></vxe-table-column> <vxe-table-column label="姓名" prop="name"></vxe-table-column> <vxe-table-column label="性别" prop="sex"></vxe-table-column> <vxe-table-column label="年龄" prop="age"></vxe-table-column> <vxe-table-column label="地址" prop="address"> <template #header> <div>地址</div> <div> <vxe-button @click="handleMerge">合并</vxe-button> </div> </template> <template #cell="{row, column, rowIndex, columnIndex}"> {{ row.address }} </template> <template #spanMethod="{ row, column, rowIndex, columnIndex }"> <!-- 判断是否需要合并 --> <template v-if="columnIndex === 3 && rowIndex === 0"> <td :rowspan="2" :colspan="2">{{ row.address }}</td> </template> <template v-else-if="columnIndex === 4 && rowIndex === 1"> <!-- 合并后的单元格不需要显示内容 --> <td></td> </template> <template v-else> <td>{{ row[column.property] }}</td> </template> </template> </vxe-table-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', sex: '男', age: 18, address: '北京市海淀区' }, { name: '李四', sex: '女', age: 20, address: '北京市朝阳区' }, { name: '王五', sex: '男', age: 22, address: '上海市浦东新区' }, { name: '赵六', sex: '女', age: 24, address: '广州市天河区' } ] } }, methods: { handleMerge() { // 设置需要合并的列 this.$refs.table.setAllColumnVisible(false) this.$refs.table.setColumnVisible(['name', 'sex', 'age'], true) this.$refs.table.setColumnVisible(['address'], true) this.$refs.table.setHeaderVisible(false) } } } </script> ``` 在上面的示例代码中,我们通过设置表头的 `children` 属性来定义需要合并的列,即 `地址` 列。然后在表格中使用 `span-method` 属性来指定合并规则。在 `spanMethod` 方法中,我们判断当前单元格是否需要合并,如果需要合并,则设置 `rowspan` 和 `colspan` 属性来合并单元格。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值