AntDesign - Vue Table元件 實現動態表格、表頭分組的功能（方式一）

Roséa發表於2024-11-26
Vue元件

一、功能分析

　　產品經理要求企微主體名稱是配置項且後期可修改或增加，各企微主體賬號的資料一對應。

　　前端開發設計方案為：靜態列（左部分）在前端寫，配置項由後端介面返回，再動態追加到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
      })

　　結束寫程式碼，註釋都加上了，哈哈哈~

相關文章