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
/>到此這篇關(guān)于vue3 + Ant Design 實現(xiàn)雙表頭表格(橫向表頭+縱向表頭)的文章就介紹到這了,更多相關(guān)vue Ant Design雙表頭表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+echarts繪制省份地圖并添加自定義標(biāo)注方式
這篇文章主要介紹了vue+echarts繪制省份地圖并添加自定義標(biāo)注方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
flutter使用tauri實現(xiàn)一個一鍵視頻轉(zhuǎn)4K軟件
這篇文章主要為大家介紹了flutter使用tauri實現(xiàn)一個一鍵視頻轉(zhuǎn)4K軟件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09
vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
基于Vue3+IntersectionObserver實現(xiàn)高性能圖片懶加載
本文詳解 Vue3 中如何使用 IntersectionObserver API 實現(xiàn)圖片懶加載,核心優(yōu)勢在于進入視口才加載圖片,可顯著提升首屏加載速度、節(jié)省帶寬資源、避免頁面卡頓,適合多圖列表場景,需要的朋友可以參考下2026-05-05

