Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

@データ
@ApiModel(説明 = "データ辞書")
@テーブル名("辞書")
パブリッククラスDict {

    プライベート静的最終long serialVersionUID = 1L;

    @ApiModelProperty(値 = "id")
    プライベートな Long ID;

    @ApiModelProperty(値 = "作成時間")
    @JsonFormat(パターン = "yyyy-MM-dd HH:mm:ss")
    @テーブルフィールド("create_time")
    プライベート日付createTime;

    @ApiModelProperty(値 = "更新時間")
    @TableField("更新時間")
    プライベート日付更新時間;

    @ApiModelProperty(値 = "論理削除 (1: 削除済み、0: 削除されていない)")
    @テーブルロジック
    @TableField("削除済み")
    プライベート整数 isDeleted;

    @ApiModelProperty(値 = "その他のパラメータ")
    @テーブルフィールド(存在する = false)
    プライベート Map<String,Object> パラメータ = new HashMap<>();

    @ApiModelProperty(値 = "上位 ID")
    @テーブルフィールド("親ID")
    プライベート Long 親 ID;

    @ApiModelProperty(値 = "名前")
    @テーブルフィールド("名前")
    プライベート文字列名;

    @ApiModelProperty(値 = "値")
    @TableField("値")
    プライベート文字列値。

    @ApiModelProperty(値 = "エンコーディング")
    @TableField("dict_code")
    プライベート文字列 dictCode;

    @ApiModelProperty(value = "子ノードを含めるかどうか")
    @テーブルフィールド(存在する = false)
    プライベートブール値hasChildren;

}

 //親 ID に従ってサブデータ リストを照会します @ApiOperation(value = "親 ID に従ってサブデータ リストを照会します")
    @GetMapping("子データ/{id} を検索")
    パブリック結果findChildData(@PathVariable Long id){
        リスト<Dict> list = dictService.findChildData(id);
        Result.ok(リスト)を返します。
    }

@サービス
パブリッククラス DictServiceImpl は ServiceImpl<DictMapper, Dict> を拡張し、DictService を実装します {

    //親IDに従ってサブデータリストを照会する @Override
    パブリックリスト<Dict> findChildData(Long id) {
        QueryWrapper<Dict> wrapper = 新しい QueryWrapper<>();
        wrapper.eq("parent_id",id);
        リスト<Dict> リスト = baseMapper.selectList(ラッパー);
        //リストコレクション内の各辞書オブジェクトにhasChildrenを設定します
        リスト.forEach(x->{
            長い dictId = x.getId();
            ブール値 isChild = this.isChildren(dictId);
            x.setHasChildren(子が存在するかどうか)
        });
        リストを返します。
    }

    // id の下に子データがあるかどうかを判断 private boolean isChildren(Long id){
        QueryWrapper<Dict> wrapper = 新しい QueryWrapper<>();
        wrapper.eq("parent_id",id);
        整数カウント = baseMapper.selectCount(ラッパー);
        カウント > 0 を返します。
    }
}

 <テンプレート>
  <div class="アプリコンテナ">

    <el-テーブル
      :data="リスト"
      スタイル="幅: 100%"
      行キー="id"
      国境
      怠け者
      :load="getChildrens"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="名前" width="230" align="left">
        <テンプレート スロット スコープ="スコープ">
          <span>{{ スコープ.行.名前 }}</span>
        </テンプレート>
      </el-table-column>

      <el-table-column label="エンコーディング" width="220">
        <テンプレート スロット スコープ="{行}">
          {{ row.dictCode }}
        </テンプレート>
      </el-table-column>
      <el-table-column ラベル="値" 幅="230" 配置="左">
        <テンプレート スロット スコープ="スコープ">
          <span>{{ スコープ.行.値 }}</span>
        </テンプレート>
      </el-table-column>
      <el-table-column label="作成時間" align="center">
        <テンプレート スロット スコープ="スコープ">
          <span>{{ スコープ.行.作成時間 }}</span>
        </テンプレート>
      </el-table-column>
    </el-table>
  </div>

</テンプレート>

<スクリプト>
'@/api/dict' から dict をインポートします
エクスポートデフォルト{
  名前: 'リスト',
  データ（）{
    戻る {
      list:[], //データ辞書リスト配列 dialogImportVisible:false, //ポップアップボックスを表示するかどうかを設定します}
  },
  作成された() {
    this.getDictList(1)
  },
  方法:{
    //データ辞書リスト getDictList(id){
      dict.dictList(id)
        .then(応答=>{
            this.list=レスポンスデータ
        })
    },
    getChildrens(ツリー、ツリーノード、解決) {
      dict.dictList(tree.id).then(応答 => {
        解決(応答データ)
      })
    },
  }
}
</スクリプト>

<スタイルスコープ>

</スタイル>

 '@/utils/request' からリクエストをインポートします

エクスポートデフォルト{
  //データ辞書リスト dictList(id){
    リクエストを返す({
      url: `/admin/cmn/dict/findChildData/${id}`,
      メソッド: 'get'
    })
  },
}