vxe-grid 合并行

<vxe-table
          border
          resizable
          height="300"
          :scroll-y="{enabled: false}"
          :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>
        
    
        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, data }) {
              const fields = ['key']  
              const cellValue = row[column.property]
              if (cellValue && fields.includes(column.property)) {
                const prevRow = data[rowIndex - 1]
                let nextRow = data[rowIndex + 1]
                if (prevRow && prevRow[column.property] === cellValue) {
                  return { rowspan: 0, colspan: 0 }
                } else {
                  let countRowspan = 1
                  while (nextRow && nextRow[column.property] === cellValue) {
                    nextRow = data[++countRowspan + rowIndex]
                  }
                  if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 }
                  }
                }
              }
            }
          }
        }
        

<vxe-table
          border
          resizable
          height="300"
          :scroll-y="{enabled: false}"
          :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>
        
    
        export default {
          data () {
            return {
              tableData3: [
                { id: 10001, fname: 'app.label.name', content: '名称', language: 'zh_CN' },
                { id: 10002, fname: 'app.label.name', content: 'Name', language: 'en_US' },
                { id: 10003, fname: 'app.label.sex', content: '性别', language: 'zh_CN' },
                { id: 10004, fname: 'app.label.sex', content: 'Sex', language: 'en_US' },
                { id: 10005, fname: 'app.label.age', content: '年龄', language: 'zh_CN' },
                { id: 10006, fname: 'app.label.age', content: 'Age', language: 'en_US' },            
              ]
            }
          },
          methods: {
            // 通用行合并函数（将相同多列数据合并为一行）
            mergeRowMethod ({ row, rowIndex, column, data}) {
              const fields = ['fname']
              const cellValue = row[column.property]
              if (cellValue && fields.includes(column.property)) {
                const prevRow = data[rowIndex- 1]
                let nextRow = data[rowIndex+ 1]
                if (prevRow && prevRow[column.property] === cellValue) {
                  return { rowspan: 0, colspan: 0 }
                } else {
                  let countRowspan = 1
                  while (nextRow && nextRow[column.property] === cellValue) {
                    nextRow = data[++countRowspan + rowIndex]
                  }
                  if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 }
                  }
                }
              }
            }
          }
        }
        

标签：language,vxe,app,合并,label,content,grid,key,id
来源： https://blog.csdn.net/lu92649264/article/details/114287981