Table 表格 静态表头+动态表头

el-table 是 Element UI 的一个表格组件,在工作需要各种要求。这里讲诉的是支持动态表头。通过 v-for 遍历动态数据来动态生成表头

1、表格结构

<el-table :data="tableData" border style="width: 100%" :header-cell-style="setTitle"  height="830">
            <el-table-column type="index" label="序号" width="50" align="center" fixed/>
            <el-table-column prop="companyName" label="公司名称" width="220" fixed/>
            <el-table-column prop="goodsName" label="商品名称" width="580"/>
            <el-table-column prop="itemId" label="商品编码" width="130" />
            <el-table-column prop="skuId" label="单品编码" width="130"/>
            <el-table-column prop="saleTotalInPrice_all" label="近一年销售额" width="130" />
            <el-table-column prop="grossProfit_all" label="近一年毛利" width="130"/>
            <el-table-column prop="grossMargin_all" label="近一年毛利率" width="130"/>
            <el-table-column v-for="header in yuefen" :key="header.prop" :prop="header.prop"
              :label="header.label"></el-table-column>
          </el-table>

2、 数据结构

tableData: [
        {
          "companyName": "广西宏汇科技有限公司",
          "goodsName": "得力 7442多瑙河复印纸(A4-70g) 8包/箱",
          "itemId": "10002490251",
          "skuId": "20002368929",
          "saleTotalInPrice_all": 163498.7984008789,
          "grossProfit_all": 19071.839908838272,
          "grossMargin_all": "11.66%",
          "grossMargin_m0": "16.62%",
          "grossMargin_m1": "17.95%",
          "grossMargin_m2": "15.84%",
          "grossMargin_m3": "5.12%",
          "grossMargin_m4": "10.16%",
          "grossMargin_m5": "6.5%",
          "grossMargin_m6": "10.76%",
          "grossMargin_m7": "10.22%",
          "grossMargin_m8": "6.75%",
          "grossMargin_m9": null,
          "grossMargin_m10": null,
          "grossMargin_m11": null,
          "grossMargin_m12": null
        },
        {
          "companyName": "广西宏汇科技有限公司",
          "goodsName": "得力 复印纸 (A4-80g) 8包/箱",
          "itemId": "10002490245",
          "skuId": "20002368923",
          "saleTotalInPrice_all": 123525,
          "grossProfit_all": 22688.63012123108,
          "grossMargin_all": "18.37%",
          "grossMargin_m0": "16.8%",
          "grossMargin_m1": "19.01%",
          "grossMargin_m2": "15.58%",
          "grossMargin_m3": "7.07%",
          "grossMargin_m4": "3.56%",
          "grossMargin_m5": "2.75%",
          "grossMargin_m6": "9.52%",
          "grossMargin_m7": "5.16%",
          "grossMargin_m8": "56.72%",
          "grossMargin_m9": null,
          "grossMargin_m10": null,
          "grossMargin_m11": null,
          "grossMargin_m12": null
        }
      ],

yuefen: [
        {
          prop:  "grossMargin_m0",
          label: "2022-11"
        },
        {
          prop:  "grossMargin_m1",
          label: "2022-12",
        },
        {
          prop:  "grossMargin_m2",
          label: "2023-01",
        },
        {
          prop:  "grossMargin_m3",
          label: "2023-02",
        },
        {
          prop:  "grossMargin_m4",
          label:  "2023-03",
        },
        {
          prop:  "grossMargin_m5",
          label: "2023-04",
        },
        {
          prop:  "grossMargin_m6",
          label: "2023-05",
        },
        {
          prop:  "grossMargin_m7",
          label: "2023-06",
        },
        {
          prop:  "grossMargin_m8",
          label: "2023-07",
        },
        {
          prop:  "grossMargin_m9",
          label: "2023-08",
        },
        {
          prop:  "grossMargin_m10",
          label:  "2023-09",
        },
        {
          prop:  "grossMargin_m11",
          label: "2023-10",
        },
        {
          prop:  "grossMargin_m12",
          label: "2023-11"
        }
      ]

3、效果