一、功能分析
產(chǎn)品經(jīng)理要求企微主體名稱是配置項且后期可修改或增加,各企微主體賬號的數(shù)據(jù)一對應。
前端開發(fā)設計方案為:靜態(tài)列(左部分)在前端寫,配置項由后端接口返回,再動態(tài)追加到columns中,根據(jù)表頭dataIndex對應的數(shù)據(jù)項,填充到數(shù)據(jù)數(shù)組dataSource。
至此,開發(fā)思路出來了,開始動手寫代碼!
二、功能代碼
1. 表格組件:關(guān)鍵屬性 :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(){} 定義靜態(tài)列。
表頭分組顯示 企微名稱及分組數(shù)據(jù),主要是 children 數(shù)組實現(xiàn),注意: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: [ // 分組結(jié)構(gòu) { title: '分組1', dataIndex: 'alreadyTotal' + i, // 表頭dataIndex,對應dataSource key: 'alreadyTotal' + i, // 注意 i 值 width: 100, // 一定要設置分組寬度 scopedSlots: { customRender: 'alreadyTotalSlot' } // 表格template插槽內(nèi)容 }, { 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' } }, ], }
// 表頭數(shù)組追加到columns if (isSubjectSame) { this.columns.splice(4 + index, 0, obj) } this.accountData.push(obj) }); this.$nextTick(() => { this.queryPage() }) }).catch(err => { this.accountData = [] this.queryPage() }) }
獲取表格數(shù)據(jù)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 })
結(jié)束寫代碼,注釋都加上了,哈哈哈~
浙公網(wǎng)安備 33010602011771號