VUE之Vxe-table动态生成多级表头及后端返回数据的处理

需求：
1.第一列为正常列；
2.第二列开始为动态生成列（根据接口返回数据生成）；
3.最后一列为编辑列。

步骤：

写入动态html模板

<vxe-table
 id="prdRequest-id"
  ref="clearSort-req"
  border
  :page="page"
  :row-config="{ isHover: true }"
  v-bind="{
    height: tableHeight,
    sortConfig: {remote: true},
    showFooter: true,
    'show-overflow':true
  }"
  auto-resize
  align="center"
  class="content-height mytable-scrollbar"
  :data="tableData"
  :footer-method="footerMethod"
  @sort-change="sortChange"
>
  <vxe-column title="日期" field="recordDate" width="120" sortable />
  
  <template v-for="(item, key) in TableColumns">
  
    <vxe-colgroup
      :key="item.label || key"
      :title="item.label"
      :width="item.width || 100"
    >
    
      <template v-if="item.children">
        <vxe-column
          v-for="(items, index) in item.children"
          :key="index"
          :title="items.label"
          :field="items.prop"
          v-bind="{'show-overflow': true}"
        />
      template>
    vxe-colgroup>
  template>
  <vxe-column
    :width="200"
    type="html"
    title="操作"
  >
    <template slot-scope="scope">
      <div class="table-reload">
        <span class="table-reload-examine" @click="(e) => handleEditRow(e, scope.row)">编辑span>
      div>
    template>
  vxe-column>
vxe-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

核心js方法

centerProcess(response) {
      if (response.code === 200) {
        response.data.records.map(item => {
          // 动态生成colums（由于一级表头对应多个二级表头，而二级表头为三个固定重复表头，故加入index以保证prop唯一性）
          this.TableColumns = item.detail.map((v, index) => {
            return {
              label: v.sectionName,
              children: [
                {
                  prop: 'receiveNum' + index,
                  label: '领料数'
                },
                {
                  prop: 'goodNum' + index,
                  label: '良品数'
                },
                {
                  prop: 'goodRate' + index,
                  label: '良品率'
                }
              ]
            }
          })
        })
        //合计行参数处理
        for (var i = 0; i < this.TableColumns.length; i++) {
          this.totalArr.push(...['receiveNum' + i, 'goodNum' + i])
        }
        // 将detail中三个数量处理为下标对应值（和表头处理类似）
        response.data.records.map((item, index) => {
          item.detail.map((v, i) => {
            item['receiveNum' + i] = v.receiveNum
            item['goodNum' + i] = v.goodNum
            item['goodRate' + i] = v.goodRate
          })
        })
        this.tableData = response.data.records
        this.page.total = response.data.total
        this.loading = false
      } else {
        this.$message({
          message: response.message,
          type: 'error'
        })
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

response返回数据格式：

来看前端效果

非常nice！