vue3?+?Ant?Design?實現雙表頭表格的效果(橫向表頭+縱向表頭)
更新時間:2023年12月25日 10:13:55 作者:十五圓
這篇文章主要介紹了vue3?+?Ant?Design?實現雙表頭表格(橫向表頭+縱向表頭),需要的朋友可以參考下
一、要實現的效果(縱向固定表頭的表格,橫向表頭數量動態(tài)化)
二、這是后臺返回的數據格式(以企業(yè)為數組,每個企業(yè)里有個站點數組pointFactors)
三、代碼實現步驟
(1)定義縱向固定表頭
// 縱向表頭數組 tableColumns const tableColumns = ref([ { label: "日(24小時)數據濃度均值", value: "monthMaxDayValue", }, { label: "小時數據平均濃度均值", value: "monthHourValue", }, ]);
(2)動態(tài)生成橫向表頭(從接口獲取數據)
//定義橫向表頭列 columns const columns = ref([]); //定義表格數據 const list = ref([]); // 先添加第一列 columns.value = [ { title: "", dataIndex: "timeType", width: 190, fixed: "left", }, ]; //處理接口返回的數據data,動態(tài)拼接表頭數組 columns data.forEach(item => { const obj = { id: item.enterpriseId, parentId: null, title: item.enterpriseName, align: "center", children: [], }; if (item.pointFactors.length) { item.pointFactors.forEach(element => { list.push({ name: element.pointName, id: element.pointId, monthMaxDayValue: element.monthMaxDayValue, monthHourValue: element.monthHourValue, }); const childObj = { id: element.pointId, parentId: item.enterpriseId, title: element.pointName, width: 130, align: "center", dataIndex: element.pointId, customRender: ({ record }) => { return record[element.pointId] ? record[element.pointId] : "-"; }, }; obj.children.push(childObj); }); } columns.value.push(obj); });
(3)循環(huán)原始數據,生成組件需要的橫向數據
// tableColums 已定義的縱向表頭 // tableData 已定義的表格數組 for (const tab of tableColumns.value) { const col: any = Object.create(null); list.forEach((item, index) => { col.timeType = tab.label; col[list[index + 0].id] = item[tab.value]; }); tableData.value.push(col); }
(4)數據帶入表格組件中
<a-table :columns="columns" :data-source="tableData" :pagination="false" row-key="id" bordered />
到此這篇關于vue3 + Ant Design 實現雙表頭表格(橫向表頭+縱向表頭)的文章就介紹到這了,更多相關vue Ant Design雙表頭表格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決
這篇文章主要介紹了Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06Vue的根路徑為什么不能作為跳板跳轉到其他頁面(問題診斷及方案)
文章主要介紹了Vue應用中路由配置錯誤的診斷和解決方案,根路徑配置錯誤和未正確使用`<router-view>`標簽是常見的問題,會導致路由參數無法正常傳遞,感興趣的朋友跟隨小編一起看看吧2025-03-03