一、要实现的效果(纵向固定表头的表格,横向表头数量动态化)
二、这是后台返回的数据格式(以企业为数组,每个企业里有个站点数组pointFactors)
三、代码实现步骤
(1)定义纵向固定表头
1 // 纵向表头数组 tableColumns 2 const tableColumns = ref([ 3 { 4 label: "日(24小时)数据浓度均值", 5 value: "monthMaxDayValue", 6 }, 7 { 8 label: "小时数据平均浓度均值", 9 value: "monthHourValue", 10 }, 11 ]);
(2)动态生成横向表头(从接口获取数据)
1 //定义横向表头列 columns 2 const columns = ref([]); 3 //定义表格数据 4 const list = ref([]); 5 6 // 先添加第一列 7 columns.value = [ 8 { 9 title: "", 10 dataIndex: "timeType", 11 width: 190, 12 fixed: "left", 13 }, 14 ]; 15 16 //处理接口返回的数据data,动态拼接表头数组 columns 17 data.forEach(item => { 18 const obj = { 19 id: item.enterpriseId, 20 parentId: null, 21 title: item.enterpriseName, 22 align: "center", 23 children: [], 24 }; 25 if (item.pointFactors.length) { 26 item.pointFactors.forEach(element => { 27 list.push({ 28 name: element.pointName, 29 id: element.pointId, 30 monthMaxDayValue: element.monthMaxDayValue, 31 monthHourValue: element.monthHourValue, 32 }); 33 const childObj = { 34 id: element.pointId, 35 parentId: item.enterpriseId, 36 title: element.pointName, 37 width: 130, 38 align: "center", 39 dataIndex: element.pointId, 40 customRender: ({ record }) => { 41 return record[element.pointId] 42 ? record[element.pointId] 43 : "-"; 44 }, 45 }; 46 obj.children.push(childObj); 47 }); 48 } 49 columns.value.push(obj); 50 });
(3)循环原始数据,生成组件需要的横向数据
1 // tableColums 已定义的纵向表头 2 // tableData 已定义的表格数组 3 4 for (const tab of tableColumns.value) { 5 const col: any = Object.create(null); 6 7 list.forEach((item, index) => { 8 col.timeType = tab.label; 9 col[list[index + 0].id] = item[tab.value]; 10 }); 11 tableData.value.push(col); 12 }
(4)数据带入表格组件中
<a-table :columns="columns" :data-source="tableData" :pagination="false" row-key="id" bordered />
千百度
© 版权声明
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
THE END
暂无评论内容