vue3 串联表格 匹配上方和左侧（个人笔记）

 页面代码

<template>
  <div class="layout-container">
    <div class="box2">
      <h4>库存支撑分析：</h4>
      <div class="justify-content-end">
        <el-button>获取接单量</el-button>
      </div>
      <el-table :data="tableData1" style="width: 100%"> //element tabel表格组件绑定数据源
        <el-table-column prop="name" label="数量" />
        <el-table-column v-if="tableData1.length > 0" v-for="(item, k) in                         
          tableData1[0].data" :key="item.id" :label="item.month + '月'">
          <el-table-column label="目标">
            <template #default="scope"> // 展示不同的数据
              {{ tableData1[0].data[k][scope.row.key] }}
            </template>
          </el-table-column>
          <el-table-column label="实际" v-if="k <= 1">
            <template #default="scope"> // 展示不同的数据
              {{ tableData1[0].data[k][scope.row.key1] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

数据处理代码

<script lang="ts">
import { defineComponent, ref } from "vue";
import { materialpropcur } from "@/api/Mdse"; //这里是我调取的接口
export default defineComponent({
  setup() {
    let tableData1 = ref([]); //数据源
    //调取接口处理数据
    materialpropcur().then((res) => {
      console.log(res.data);
        // 添加区别key 
      let newArr = [
        { name: "接单量", data: [], key: "orderObjective", key1: "orderFact" },
        { name: "出货量", data: [], key: "outQty", key1: "realityOutQty" },
        { name: "可用库存", data: [], key: "factQty", key1: "realityFactQty" },
        { name: "呆滞库存", data: [], key: "dullQty", key1: "realityDullQty" },
        { name: "月产能需求", data: [], key: "capacityQty", key1: "realityCapacityQty" },
        { name: "现月可生产量", data: [], key: "outputQty", key1: "realityOutputQty" },
        { name: "产能负荷", data: [], key: "orderObjective", key1: "orderFact" },
      ];
        // 这里每一条data都有所有的数据 用Key和key1来获取所需要的
      newArr.forEach((item) => {
        res.data.forEach((item1) => {
          item.data.push(item1);
        });
      });
      console.log(newArr);
      tableData1.value = newArr;
      console.log(tableData1.value);
    });
    return {
      tableData1,
    };
  },
});
</script>

css

<style lang="scss" scoped>
.layout-container {
  padding: 10px;
  .justify-content-end {
    display: flex;
    justify-content: end;
  }
  .box2 {
    width: 100%;
    height: 100%;
  }
}
</style>