vue3?+?Ant?Design?實現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)
更新時間：2023年12月25日 10:13:55 作者：十五圓
這篇文章主要介紹了vue3?+?Ant?Design?實現(xiàn)雙表頭表格（橫向表頭+縱向表頭）,需要的朋友可以參考下
一、要實現(xiàn)的效果（縱向固定表頭的表格，橫向表頭數(shù)量動態(tài)化）
二、這是后臺返回的數(shù)據(jù)格式（以企業(yè)為數(shù)組，每個企業(yè)里有個站點數(shù)組pointFactors）
三、代碼實現(xiàn)步驟
（1）定義縱向固定表頭
// 縱向表頭數(shù)組 tableColumns
const tableColumns = ref([
{
label: "日（24小時）數(shù)據(jù)濃度均值",
value: "monthMaxDayValue",
},
{
label: "小時數(shù)據(jù)平均濃度均值",
value: "monthHourValue",
},
]);（2）動態(tài)生成橫向表頭（從接口獲取數(shù)據(jù)）
//定義橫向表頭列 columns
const columns = ref([]);
//定義表格數(shù)據(jù)
const list = ref([]);
// 先添加第一列
columns.value = [
{
title: "",
dataIndex: "timeType",
width: 190,
fixed: "left",
},
];
//處理接口返回的數(shù)據(jù)data，動態(tài)拼接表頭數(shù)組 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)原始數(shù)據(jù)，生成組件需要的橫向數(shù)據(jù)
// tableColums 已定義的縱向表頭
// tableData 已定義的表格數(shù)組
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）數(shù)據(jù)帶入表格組件中
<a-table
:columns="columns"
:data-source="tableData"
:pagination="false"
row-key="id"
bordered
/>到此這篇關于vue3 + Ant Design 實現(xiàn)雙表頭表格（橫向表頭+縱向表頭）的文章就介紹到這了,更多相關vue Ant Design雙表頭表格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue+echarts繪制省份地圖并添加自定義標注方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了解決Vue項目中tff報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue面試題及Vue知識點整理，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
flutter使用tauri實現(xiàn)一個一鍵視頻轉4K軟件
這篇文章主要為大家介紹了flutter使用tauri實現(xiàn)一個一鍵視頻轉4K軟件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue通過懶加載提升頁面響應速度，對Vue性能感興趣的同學，可以參考下2021-05-05
vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
基于Vue3+IntersectionObserver實現(xiàn)高性能圖片懶加載
本文詳解 Vue3 中如何使用 IntersectionObserver API 實現(xiàn)圖片懶加載,核心優(yōu)勢在于進入視口才加載圖片,可顯著提升首屏加載速度、節(jié)省帶寬資源、避免頁面卡頓,適合多圖列表場景,需要的朋友可以參考下2026-05-05
這篇文章主要為大家詳細介紹了vue驗證碼插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在項目中會發(fā)現(xiàn)一個奇怪的現(xiàn)象，當我們在使用element-plus中的圖標組件時會出現(xiàn)內存泄漏，所以本文講給大家講講如何解決vue3中的內存泄漏的問題,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了手寫Vue彈窗Modal的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09