vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)

更新時(shí)間：2023年12月25日 10:13:55 作者：十五圓

這篇文章主要介紹了vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格（橫向表頭+縱向表頭）,需要的朋友可以參考下

一、要實(shí)現(xiàn)的效果（縱向固定表頭的表格，橫向表頭數(shù)量動(dòng)態(tài)化）
二、這是后臺(tái)返回的數(shù)據(jù)格式（以企業(yè)為數(shù)組，每個(gè)企業(yè)里有個(gè)站點(diǎn)數(shù)組pointFactors）
三、代碼實(shí)現(xiàn)步驟

（1）定義縱向固定表頭
（2）動(dòng)態(tài)生成橫向表頭（從接口獲取數(shù)據(jù)）
（3）循環(huán)原始數(shù)據(jù)，生成組件需要的橫向數(shù)據(jù)
（4）數(shù)據(jù)帶入表格組件中

一、要實(shí)現(xiàn)的效果（縱向固定表頭的表格，橫向表頭數(shù)量動(dòng)態(tài)化）

二、這是后臺(tái)返回的數(shù)據(jù)格式（以企業(yè)為數(shù)組，每個(gè)企業(yè)里有個(gè)站點(diǎn)數(shù)組pointFactors）

三、代碼實(shí)現(xiàn)步驟

（1）定義縱向固定表頭

// 縱向表頭數(shù)組 tableColumns
const tableColumns = ref([
  {
    label: "日（24小時(shí)）數(shù)據(jù)濃度均值",
    value: "monthMaxDayValue",
  },
  {
    label: "小時(shí)數(shù)據(jù)平均濃度均值",
    value: "monthHourValue",
  },
]);

（2）動(dòng)態(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，動(dòng)態(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 實(shí)現(xiàn)雙表頭表格（橫向表頭+縱向表頭）的文章就介紹到這了,更多相關(guān)vue Ant Design雙表頭表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: