AntDesign - Vue Table组件 实现动态表格、表头分组的功能（方式一）

 

一、功能分析

　　产品经理要求企微主体名称是配置项且后期可修改或增加，各企微主体账号的数据一对应。

　　前端开发设计方案为：静态列（左部分）在前端写，配置项由后端接口返回，再动态追加到columns中，根据表头dataIndex对应的数据项，填充到数据数组dataSource。

　　至此，开发思路出来了，开始动手写代码！

二、功能代码

　　1. 表格组件：关键属性  :columns="columns"

<a-table
        ref="table"
        bordered
        :columns="columns"
        :dataSource="tableData"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :loading="loading"
        :pagination="false"
        :scroll="{y: tableHeight-82, x:'max-content'}"
        :style="{ height: tableHeight+ 'px' }"
        class="table-list"
      >
</a-table>

　　2. script部分：

　　columns 在data(){} 定义静态列。

　　表头分组显示 企微名称及分组数据，主要是 children 数组实现，注意：dataIndex值不能重复！

queryList() {
      GetEntityList().then(res => {
        let { data } = res.data
        let result = data && data.length ? data.sort((a1, a2) => a1.sort - a2.sort) : [] // 企微主体名称按照sort顺序展示
        let isSubjectSame = false // 判断企微主体是否一样
        if (JSON.stringify(result) != JSON.stringify(this.entityList)) isSubjectSame = true
        this.entityList = result
        result.forEach((rs, index) => {
          let i = index + 1
          let obj = {
            id: rs.subjectId,
            title: rs.subjectName,
            accountIndex: i,
            children: [ // 分组结构
              {
                title: '分组1',
                dataIndex: 'alreadyTotal' + i, // 表头dataIndex，对应dataSource
                key: 'alreadyTotal' + i, // 注意 i 值
                width: 100, // 一定要设置分组宽度
                scopedSlots: { customRender: 'alreadyTotalSlot' } // 表格template插槽内容
              }, {
                title: '分组2',
                dataIndex: 'answerTotal' + i,
                key: 'answerTotal' + i,
                width: 100,
                scopedSlots: { customRender: 'answerTotalSlot' }
              }, {
                title: '分组3',
                dataIndex: 'balanceTotal' + i,
                key: 'balanceTotal' + i,
                width: 100,
                scopedSlots: { customRender: 'balanceTotalSlot' }
              },
            ],
          }
　　　　　　// 表头数组追加到columns
          if (isSubjectSame) { this.columns.splice(4 + index, 0, obj) }
          this.accountData.push(obj)
        });
        this.$nextTick(() => {
          this.queryPage()
        })
      }).catch(err => {
        this.accountData = []
        this.queryPage()
      })
    }

  获取表格数据dataSource

queryPage() {
      GetAccountList().then(res => {
        let { data } = res.data
        data.list.forEach(rs => {
          rs.accountDetailList.map(ad => {
            let accountObj = this.accountData.filter(el => el.id == ad.subjectId)
            if (accountObj && accountObj.length) {
              let j = accountObj[0].accountIndex
              let balanceTotal = ad.answerTotal - ad.alreadyTotal
              rs['alreadyTotal' + j] = ad.alreadyTotal // 对应表头的dataIndex
              rs['answerTotal' + j] = ad.answerTotal // 注意 j 值
              rs['balanceTotal' + j] = balanceTotal ? parseFloat(balanceTotal.toFixed(4)) : balanceTotal
            }
            return ad
          })
        })
        this.tableData = data.list
        this.total = data.count.value
      }).catch(err => {
        this.tableData = []
        this.total = 0
      })

　　结束写代码，注释都加上了，哈哈哈~