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)文章
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決
這篇文章主要介紹了Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06
Vue3中按需引入ECharts詳細(xì)步驟(一看就會)
新項目采用Vue3作為前端項目框架,避免不了要使用echarts,這篇文章主要給大家介紹了關(guān)于Vue3中按需引入ECharts的相關(guān)資料,需要的朋友可以參考下2023-09-09
Vue的根路徑為什么不能作為跳板跳轉(zhuǎn)到其他頁面(問題診斷及方案)
文章主要介紹了Vue應(yīng)用中路由配置錯誤的診斷和解決方案,根路徑配置錯誤和未正確使用`<router-view>`標(biāo)簽是常見的問題,會導(dǎo)致路由參數(shù)無法正常傳遞,感興趣的朋友跟隨小編一起看看吧2025-03-03

