vue要素-uiテーブルコンポーネントの動的マルチレベルヘッダー

実際のプロジェクト要件では、テーブル ヘッダーに含まれる情報がバックエンドの動的取得メソッドに基づいて初期化される必要があり、多くの情報は規則的なため、マルチレベル ヘッダーを動的に生成するための Element UI が必要です。必要なレンダリングは次のとおりです。

統計ディメンションは変更可能であるため (州、市、地区など)、データのテーブルを設定してヘッダーを保存し、v-for="item in tableColData" を使用してループでテーブルを表示する必要があります。ヘッダー。これは、州や市がヘッダー データをループで表示するためです。そのため、州や市に 2 番目のレベルのヘッダーがある場合は、ヘッダー データに追加レベルの子を設定し、さらに v-for の 2 番目の層を設定する必要があります。 ="item1 in item.children" を使用して 2 番目のヘッダーを走査します。コードは以下のように表示されます:

 <el-table
     :cell-class-name="addClass"
      class="table_style"
      :data="tableData9"
      :header-cell-style="{
        backgroundColor: 'rgba(3,39,85,0.92)',
        color: '#BADCFF',
        fontSize: '16px',
        textAlign: 'center',
      }"
      :cell-style="{
        color: '#fff',
        backgroundColor: 'transparent',
        fontSize: '16px',
        textAlign: 'center',
      }"
      :row-style="{
        color: '#fff',
        backgroundColor: 'transparent',
        fontSize: '16px',
        textAlign: 'center',
      }"
      style="width: 100%"
      max-height="252"
    >
      <el-table-column
        v-for="item in tableColData"
         width="180px"
        :prop="item.id"
        :label="item.name"
        :key="item.id"
        :fixed="item.fixed"
      >
        <el-table-column
          width="180px"
          v-for="item1 in item.children"
          :prop="item1.id"
          :label="item1.name"
          :key="item1.id"
        >
        </el-table-column>
      </el-table-column>
    </el-table>

ヘッダーのデータ形式は次のとおりです。

[{
    "id": "wd",
    "name": "时间维度"
  },
  {
    "id": "qu1",
    "name": "贵池区",
    "children": [
      {
        "id": "qu1-dy",
        "name": "当月"
      },
      {
        "id": "qu1-dyzz",
        "name": "当月增长"
      },
      {
        "id": "qu1-lj",
        "name": "累计"
      },
      {
        "id": "qu1-ljzz",
        "name": "累计增长"
      }
    ]
  },
  {
    "id": "qu2",
    "name": "东至县",
    "children": [
      {
        "id": "qu2-dy",
        "name": "当月"
      },
      {
        "id": "qu2-dyzz",
        "name": "当月增长"
      },
      {
        "id": "qu2-lj",
        "name": "累计"
      },
      {
        "id": "qu2-ljzz",
        "name": "累计增长"
      }
    ]
  }]

表内のデータは次のとおりです。

[
  {
    "wd": "2月",
    "qu1-dy": "43.4",
    "qu1-dyzz": "-1.9%",
    "qu1-lj": "159.9",
    "qu1-ljzz": "-14.7%",
    "qu2-dy": "43.3",
    "qu2-dyzz": "-1.9%",
    "qu2-lj": "159.9",
    "qu2-ljzz": "-14.7%"
},
]

 各データフィールドはヘッダーIDに対応する必要があることに注意してください。