一、一级表头，根据数据动态生成，二级固定

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",
            },
          },
        ],
      },

一、一级表头和二级表头，根据数据动态生成

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",
            },
          },
        ],
      },