Table 合并行

vue 结合vxe-table实现合并行

提示：span-method ，不能用于虚拟滚动、树形结构、展开行、固定列，合并的逻辑都是自行实现的

前言

vxe-table主要通过span-method 合并方法
({ row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, data })

---

一、示例

二、自定义span-method方法

1.使用组件

代码如下（示例）：

 <vxe-table
          border
          resizable
          height="300"
          :scroll-y="{gt: -1}"
          :span-method="mergeRowMethod"
          :data="tableData3">
          <--定义列字段-->
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="key" title="Key"></vxe-table-column>
          <vxe-table-column field="content" title="Translate"></vxe-table-column>
          <vxe-table-column field="language" title="Language" :filters="[{label: '中文', value: 'zh_CN' }, {label: 'English', value: 'en_US'}]"></vxe-table-column>
        </vxe-table>

2.js代码

代码如下（示例）：

export default {
          data () {
            return {
              tableData3: [
                { id: 10001, key: 'app.label.name', content: '名称', language: 'zh_CN' },
                { id: 10002, key: 'app.label.name', content: 'Name', language: 'en_US' },
                { id: 10003, key: 'app.label.sex', content: '性别', language: 'zh_CN' },
                { id: 10004, key: 'app.label.sex', content: 'Sex', language: 'en_US' },
                { id: 10005, key: 'app.label.age', content: '年龄', language: 'zh_CN' },
                { id: 10006, key: 'app.label.age', content: 'Age', language: 'en_US' },
                { id: 10007, key: 'app.label.role', content: '角色', language: 'zh_CN' },
                { id: 10008, key: 'app.label.role', content: 'Role', language: 'en_US' },
                { id: 10009, key: 'app.label.address', content: '地址', language: 'zh_CN' },
                { id: 10010, key: 'app.label.address', content: 'Address', language: 'en_US' },
                { id: 10011, key: 'app.label.nickname', content: '昵称', language: 'zh_CN' },
                { id: 10012, key: 'app.label.nickname', content: 'Nickname', language: 'en_US' }
              ]
            }
          },
          methods: {
            // 通用行合并函数（将相同多列数据合并为一行）
            mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
            // 定义合并单元个的字段
              const fields = ['key']
             // 当前单元格的数值
              const cellValue = XEUtils.get(row, column.property)
              if (cellValue && fields.includes(column.property)) {
              // 当前单元格的上一行数据
                const prevRow = visibleData[_rowIndex - 1]
               // 下一行数据
                let nextRow = visibleData[_rowIndex + 1]
               // 与上级单元格相同
                if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
                  return { rowspan: 0, colspan: 0 }
                 // 查找下级单元格 是否存在相同的数据 存在 合并数加1
                } else {
                  let countRowspan = 1
                  while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {
                    nextRow = visibleData[++countRowspan + _rowIndex]
                  }
                  if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 }
                  }
                }
              }
            }
          }
        }

总结

此处参考https://xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/span vxe-table功能很强大，可以集成第三方库，进行行拖拽和列拖拽，此文档有很多例子可以参考。