Vue elementUI implementiert Baumstrukturtabelle und Lazy Loading

 @Daten
@ApiModel(Beschreibung = "Datenwörterbuch")
@Tabellenname("dict")
öffentliche Klasse Dict {

    private statische endgültige lange SerialVersionUID = 1L;

    @ApiModelProperty(Wert = "id")
    private lange ID;

    @ApiModelProperty(Wert = "Erstellungszeit")
    @JsonFormat(Muster = "jjjj-MM-tt HH:mm:ss")
    @TableField("Erstellungszeit")
    privates Datum, Erstellungszeit;

    @ApiModelProperty(Wert = "Aktualisierungszeit")
    @TableField("Aktualisierungszeit")
    privates Datum, Aktualisierungszeit;

    @ApiModelProperty(value = "Logische Löschung (1: gelöscht, 0: nicht gelöscht)")
    @TableLogic
    @TableField("ist_gelöscht")
    private Integer isDeleted;

    @ApiModelProperty(Wert = "andere Parameter")
    @Tabellenfeld(existiert = falsch)
    private Map<String,Objekt> param = neue HashMap<>();

    @ApiModelProperty(Wert = "überlegene ID")
    @TableField("übergeordnete_ID")
    private lange übergeordnete ID;

    @ApiModelProperty(Wert = "Name")
    @Tabellenfeld("Name")
    privater String-Name;

    @ApiModelProperty(Wert = "Wert")
    @TableField("Wert")
    privater String-Wert;

    @ApiModelProperty(Wert = "Kodierung")
    @Tabellenfeld("dict_code")
    privater String dictCode;

    @ApiModelProperty(value = "Ob untergeordnete Knoten eingeschlossen werden sollen")
    @Tabellenfeld(existiert = falsch)
    privater Boolescher Wert hat Kinder;

}

 //Frage die Unterdatenliste entsprechend der übergeordneten ID ab @ApiOperation(value = "Frage die Unterdatenliste entsprechend der übergeordneten ID ab")
    @GetMapping("findChildData/{id}")
    öffentliches Ergebnis findChildData(@PathVariable Long id){
        List<Dict> Liste = dictService.findChildData(id);
        gibt Result.ok(Liste) zurück;
    }

 @Service
öffentliche Klasse DictServiceImpl erweitert ServiceImpl<DictMapper, Dict> implementiert DictService {

    //Frage die Unterdatenliste entsprechend der übergeordneten ID ab @Override
    öffentliche Liste<Dict> findChildData(Long id) {
        QueryWrapper<Dict> Wrapper = neuer QueryWrapper<>();
        wrapper.eq("übergeordnete_id",id);
        Liste<Dict> Liste = baseMapper.selectList(Wrapper);
        //Setze hasChildren für jedes Dict-Objekt in der Listensammlung
        Liste.fürJedes(x->{
            Lange dictId = x.getId();
            boolean istKind = dies.istKinder(dictId);
            x.setHasChildren(isChild);
        });
        Liste zurückgeben;
    }

    //Beurteilen, ob unter der ID untergeordnete Daten vorhanden sind private boolean isChildren(Long id){
        QueryWrapper<Dict> Wrapper = neuer QueryWrapper<>();
        wrapper.eq("übergeordnete_id",id);
        Integer-Anzahl = baseMapper.selectCount(Wrapper);
        Rückgabewert > 0;
    }
}

 <Vorlage>
  <div Klasse="App-Container">

    <el-Tabelle
      :data="Liste"
      Stil="Breite: 100%"
      Zeilenschlüssel="id"
      Grenze
      faul
      :load="Kinder abrufen"
      :tree-props="{Kinder: 'Kinder', hatKinder: 'hatKinder'}">
      <el-table-column label="Name" width="230" align="left">
        <template slot-scope="Umfang">
          <span>{{ Umfang.Zeilenname }}</span>
        </Vorlage>
      </el-Tabellenspalte>

      <el-table-column label="Kodierung" width="220">
        <template slot-scope="{row}">
          {{ row.dictCode }}
        </Vorlage>
      </el-Tabellenspalte>
      <el-table-column label="Wert" width="230" align="links">
        <template slot-scope="Umfang">
          <span>{{ Umfang.Zeile.Wert }}</span>
        </Vorlage>
      </el-Tabellenspalte>
      <el-table-column label="Erstellungszeit" align="center">
        <template slot-scope="Umfang">
          <span>{{ Umfang.Zeile.ErstellenZeit }}</span>
        </Vorlage>
      </el-Tabellenspalte>
    </el-Tabelle>
  </div>

</Vorlage>

<Skript>
importiere dict von '@/api/dict'
Standard exportieren {
  Namensliste',
  Daten(){
    zurückkehren {
      list:[], //Datenwörterbuch-Liste-Array dialogImportVisible:false, //Festlegen, ob das Popup-Fenster angezeigt wird}
  },
  erstellt() {
    dies.getDictList(1)
  },
  Methoden:{
    //Datenwörterbuchliste getDictList(id){
      dict.dictList(id)
        .dann(Antwort=>{
            diese.Liste=Antwort.Daten
        })
    },
    getChildrens(Baum, Baumknoten, auflösen) {
      dict.dictList(Baum.id).dann(Antwort => {
        auflösen(Antwort.Daten)
      })
    },
  }
}
</Skript>

<Stilbereich>

</Stil>

 Importieren Sie die Anforderung von „@/utils/request“.

Standard exportieren {
  //Datenwörterbuchliste dictList(id){
    Rückgabeanforderung({
      URL: `/admin/cmn/dict/findChildData/${id}`,
      Methode: 'get'
    })
  },
}