一、一級表頭，根據數據動態(tài)生成，二級固定

14961675044310_.pic.jpg

1、結構

<div class="table">
            <el-table :data="data.rows" border>
              <template v-for="(item, index) in data.headers">
                <el-table-column
                  align="center"
                  :label="item.mon"
                  :key="`${index}`"
                >
                  <el-table-column align="center" label="測試數據類1">
                    <template slot="header">
                      <div>測試數據類1</div>
                    </template>
                    <template slot-scope="{ row }">
                      <div>
                        {{ row[`${item.key_str}`].subtitle_one }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="測試數據類2">
                    <template slot="header">
                      <div>測試數據類2</div>
                    </template>
                    <template slot-scope="{ row }">
                      <div>
                        {{ row[`${item.key_str}`].subtitle_two }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="測試數據類3">
                    <template slot="header">
                      <div>測試數據類3</div>
                    </template>
                    <template slot-scope="{ row }">
                      <div>{{ row[`${item.key_str}`].subtitle_three }}</div>
                    </template>
                  </el-table-column>
                </el-table-column>
              </template>
            </el-table>

2、數據

data: {
        headers: [
          {
            mon: "2021年",
            key_str: "key1",
          },

          {
            mon: "2022年",
            key_str: "key2",
          },
          {
            mon: "2023年",
            key_str: "key3",
          },
        ],
        rows: [
          {
            key1: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
            key2: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
            key3: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
          },
          {
            key1: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
            key2: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
            key3: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
          },
          {
            key1: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
            key2: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
            key3: {
              subtitle_one: "測試1",
              subtitle_two: "測試2",
              subtitle_three: "測試3",
            },
          },
        ],
      },

一、一級表頭和二級表頭，根據數據動態(tài)生成

14981675044740_.pic.jpg

1、結構

 <el-table :data="data2.rows" border>
              <template v-for="(item, index) in data2.headers">
                <el-table-column
                  align="center"
                  :label="item.mon"
                  :key="`${index}`"
                >
                  <el-table-column
                    align="center"
                    v-for="(each, ind) in data2.secondaryHeader[
                      `${item.key_str}`
                    ]"
                  >
                    <template slot="header">
                      <div>{{ each.name }}</div>
                    </template>
                    <template slot-scope="{ row }">
                      <div>{{ row[`${item.key_str}`][each.content] }}</div>
                    </template>
                  </el-table-column>
                </el-table-column>
              </template>
            </el-table>

2、數據

      },
      data2: {
        headers: [
          {
            mon: "2021年",
            key_str: "key1",
          },

          {
            mon: "2022年",
            key_str: "key2",
          },
          {
            mon: "2023年",
            key_str: "key3",
          },
        ],
        secondaryHeader: {
          key1: [
            {
              name: "二級表頭1",
              content: "prop1",
            },
            { name: "二級表頭2", content: "prop2" },
          ],
          key2: [
            {
              name: "二級表頭3",
              content: "prop3",
            },
            { name: "二級表頭4", content: "prop4" },
          ],
          key3: [
            {
              name: "二級表頭5",
              content: "prop5",
            },
            { name: "二級表頭6", content: "prop6" },
          ],
        },
        rows: [
          {
            key1: {
              prop1: "111",
              prop2: "222",
            },
            key2: {
              prop3: "333",
              prop4: "444",
            },
            key3: {
              prop5: "555",
              prop6: "666",
            },
          },
        ],
      },