有时候会出现以下需求，类似这样

image.png

其中不确定有几个分组，可能是A，B两个， 也可能是 A, B, C,D四个，因为是后台配置出来的（且分组下面的展示都一样：如这里的 A1,A2,A3,A4）
在分组数量不确定的时候，如是后台配增或减了分组之后，前端也要相对应的在页面进行修改。而且每新增一个组，对应组下面的A1,A2,A3,A4都得重新写一次，还要保证表格内容是可编辑的。这个时候表格需要动态处理表头信息。如果用官方提供的写法，整个页面会变得超长，且大部分都是重复的，所以这里我使用JSX试了一下，发现效果还不错，下面是实现过程
因为是模拟的，所以一些demo中写死但可以异步加载数据的地方会备注

// 说明 
// tableChild是分组的数组
// tableTitle是表格的表头（最终拼接tableChild后形成最终的表头结构）
 data () {
      return {
        tableChild: [ // 这个是可以动态的后台获取
          {
            id: 1,
            title: 'A'
          }, {
            id: 2,
            title: 'B'
          }, {
            id: 3,
            title: 'C'
          }, {
            id: 4,
            title: 'D'
          }, {
            id: 5,
            title: 'E'
          }, {
            id: 6,
            title: 'F'
          }
        ],
        tableTitle: [
          {
            title: '序号',
            align: 'center',
            tooltip: true,
            minWidth: 80,
            fixed: 'left',
            type: 'index'
          }, {
            fixed: 'right',
            title: '操作',
            align: 'center',
            tooltip: true,
            width: 220,
            render: (h, params) => {
              let vm = <div style="display:flex;flexDirection:row;justifyContent:space-around;">
                <i-button type="primary" size="small"replace>查看</i-button>
                <i-button type="error" size="small" style="marginLeft:3px;">删除</i-button>
              </div>
              return vm
            }
          }
        ],
        tableData: []
      }
    }

那么我们要做的第一步就是要先初始化表头信息。从而保证数据的正确性

created () {
  this.initTableTitle()
},
methods: {
      /**
       * 初始化表头
       */
      initTableTitle () {
        let insert = this.getTableChild()
        let titles = this.tableTitle
        let stash = Array.from(titles)
        titles.forEach((item, i) => {
          if (i === 0) {
            let j = i
            for (let x = 0; x < insert.length; x++) {
              stash.splice(j + x + 1, 0, insert[x])
            }
          }
        })
        this.tableTitle = stash
      },
      /**
       * 遍历获得数组对象 
       * 可能会出现有分组，但没有数据的情况
       * 所以这里用随机数处理，模拟真实情况
       * @returns {Array}
       */
      getTableChild () {
        // 相同类型下所有的表头的数组 如果这里也是动态请求的也可以的
        let arr = [
          {
            title: 'A1',
            align: 'center',
            tooltip: true,
            minWidth: 80,
            render: (h, params) => {
              let objName = this.getObjName(params.column.spec)
              let o = params.row[objName]
              if (o) {
                return <div>{o.t1}</div>
              } else {
                return <div>暂无</div>
              }
            }
          }, {
            title: 'A2',
            align: 'center',
            minWidth: 80,
            tooltip: true,
            render: (h, params) => {
              // console.log(params.column.spec)
              let objName = this.getObjName(params.column.spec)
              let o = params.row[objName]
              if (o) {
                return <i-input size="default" value={o.t2}
                                onOn-change={this.bindVal.bind(this, params, objName, 't2')}
                                onOn-blur={this.modifyItem.bind(this, params, o, 't2')}></i-input>
              } else {
                return <div>暂无</div>
              }
            }
          }, {
            title: 'A3',
            align: 'center',
            tooltip: true,
            minWidth: 80,
            render: (h, params) => {
              let objName = this.getObjName(params.column.spec)
              let o = params.row[objName]
              if (o) {
                return <i-input size="default" value={o.t3}
                                onOn-change={this.bindVal.bind(this, params, objName, 't3')}
                                onOn-blur={this.modifyItem.bind(this, params, o, 't3')}></i-input>
              } else {
                return <div>暂无</div>
              }
            }
          }, {
            title: 'A4',
            align: 'center',
            tooltip: true,
            minWidth: 100,
            render: (h, params) => {
              let objName = this.getObjName(params.column.spec)
              let o = params.row[objName]
              if (o) {
                return <i-input size="default" value={o.t4}
                                onOn-change={this.bindVal.bind(this, params, objName, 't4')}
                                onOn-blur={this.modifyItem.bind(this, params, o, 't5')}></i-input>
              } else {
                return <div>暂无</div>
              }
            }
          }
        ]
        let list = this.tableChild // 要拼接的原表头
        let stash = [] // 拼接后的结果
        for (let i = 0; i < list.length; i++) {
          let item = list[i]
          let title = item.title
          let arr1 = this.copyData(arr) // 这里得每次重新创建一份新的数组，否则会出引用传递，导致每份数据最后变成一样
          for (let j = 0; j < arr1.length; j++) {
            arr1[j].spec = title
          }
          let obj = {
            align: 'center',
            tooltip: true,
            id: item.id,
            title: item.title,
            children: arr1
          }
          stash.push(obj)
        }
        return stash
      },
      /**
       * 复制一个对象（简单一级对象带函数）
       * 主要让分组下的render函数在复制后还能使用！ 如果有更好的方法或思路，麻烦留个言
       * @param obj
       * @returns {*}
       */
      clone (obj) {
        if (obj === null) return null
        if (typeof obj !== 'object') return obj
        if (obj.constructor === Date) return new Date(obj)
        let newObj = new obj.constructor() // 保持继承链
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) { // 不遍历其原型链上的属性
            let val = obj[key]
            /* eslint-disable */
            newObj[key] = typeof val === 'object' ? arguments.callee(val) : val // 使用arguments.callee解除与函数名的耦合，这样每个复制出来的render函数都能继续使用
          }
        }
        return newObj
      },
      /**
       * 遍历数组进行复制
       * @param arr
       * @returns {Array}
       */
      copyData (arr) {
        let res = []
        for (let i in arr) {
          let item = arr[i]
          let o = this.clone(item)
          res.push(o)
        }
        return res
      }
}

在表头处理完成后就可以去请求数据了，这里也模拟了一下，最终效果如下

image.png