Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

<テンプレート>
    <div class="mytree">
          <el-tree
              :data="ツリーデータ"
              :props="デフォルトプロパティ"
              @node-click="ハンドルNodeClick"
              インデント="0"
              :render-content="レンダリングコンテンツ"
          </el-tree>
        </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent, ref} をインポートします。
エクスポートデフォルトdefineComponent({
    コンポーネント: {},
    データ（） {
        戻る {
              ツリーデータ: [
        {
          // タイプ:1,
          ラベル: 'notice-id1',
                  子供たち： [
                        {
                          ラベル: ['衛星名コード', 'ZOHREH-2'],
                        },
                        {
                          ラベル: ['組織', 'IRN'],
                        },
                        {
                          ラベル: ['周波数範囲', '10950-1450'],
                        },
                        {
                          ラベル: '[上段] 梁名',
                          子供たち： [
                              {
                                  ラベル:['名前','RS49'],
                              },
                             {
                                  ラベル:['freq_min','10950'],
                              },
                             {
                                  ラベル:['freq_max','14500'],
                              },
                              {
                                  ラベル:[]'グループ('+'3'+')','']
                                  子供たち：[
                                     {
                                        ラベル:['10600361','10950','11200','0']
                                     },
                                    {
                                        ラベル:['10600361','10950','11200','0']
                                     },
                                    {
                                        ラベル:['10600361','10950','11200','0']
                                     }
                                  ]
                              }
                      ]
                    },
                  ]、
                },
              ]、
            デフォルトプロパティ: {
            子供: 「子供達」
            ラベル: 'ラベル',
          },
        }
    },
    方法：{
    // カスタムツリーコントロール関数ノードは各ノードを表します renderContent(h,{node,data,store}){
        //div はツリー コントロールの行を表し、div には 3 つの span タグが含まれます // ノードのラベル配列の数を決定し、3 項演算によってクラスを選択します
        // ツリーコントロールの配置を制御するクラスを設定します return h('div',[
          h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
          h('span', {class:'groupStyle'},node.label[1]),
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2])
          ]);
    },
    }
})
</スクリプト>
<style lang="scss" スコープ>
.nodeStyle{
  幅:110ピクセル;
  表示:インラインブロック;
  テキスト配置:左;
}
.groupStyle{
  幅:150ピクセル;
  表示:インラインブロック;
  テキスト配置:左;
}
</スタイル>