Vue3 utilise le composant tree d'elementplus avec le composant select pour réaliser les données sélectionnées par select change une fois et lazy charge les informations de l'arbre une fois

Exigence : Les données sont affichées dans une structure arborescente sur le front-end, mais en raison de la grande taille des données, il est très lent de revenir au front-end pour le rendu, et chaque ensemble de données de structure arborescente a sa propre version correspondante, donc la solution consiste à interroger chaque version des données et à l'afficher sur le front-end sous forme de sélection. Mais il y a un autre problème. Le chargement paresseux ne se déclenche que pour la première fois : la méthode load="loadNode" ne demande pas l'interface, et les informations correspondantes ne seront pas chargées lors du basculement entre différentes versions. La solution consiste à lier d'abord une variable avec v-if sur l'instance de l'arborescence, qui par défaut est false. Lorsque la sélection change, définissez la variable sur true et exécutez la méthode loadNode lorsqu'elle est true. Un paramètre de rappel avec childNodes défini sur null. L'implémentation spécifique est la suivante :
effet de page :

Implémentation frontale :

sélectionner le sélecteur

<div>
  <el-form>
       <el-form-item label="脚本版本">
           <el-select style="width:100%" v-model="treeNodeVersion">
               <el-option
                       v-for="(item,index) in selectDataList"
                       :label="item.vName"
                       :key="index"
                       :value="item.vId"
                       @click="vClick"
               />
           </el-select>
       </el-form-item>
   </el-form>
</div>

chargement paresseux des arbres

<div style="height:500px;overflow-y: auto;">
	  <el-tree lazy
	           :load="loadNode"
	           :props="treeDefaultProps"
	           v-if="showFlag"
	           @node-click="handleTreeNodeClick"
	  />
 </div>

variable

 const treeDefaultProps = {
        children: 'children',
        label: 'fileName',  // 树结构显示的名字，需要与后台返回的字段一致
        isLeaf: 'leaf',
    };
 const showFlag = ref(false);// tree是否重新加载标识
 const node_had = ref([]); // loadNode 回调参数
 const resolve_had = ref([]); // loadNode 回调参数

méthode

/** 获取树 */
    function showXXXDetail(row) {
        xId.value = row.xId;
        selectDataList.value = [];
        treeNodeVersion.value = '';
        nextTick(() => {
           // 获取版本信息
            getXxInfoByXId( xId.value).then(resp => {
                selectDataList.value = resp.map(item => {
                    return {'vId': item.vId, 'vName': item.vName}
                })
                // 这里需要默认显示最新版本的所有树结构信息
                //所以我给select回显的那里绑定了一个selectDataList的第一条数据的id
                // 并将绑定再eltree上的标识置为ture,这样就会自己去加载数据。
                treeNodeVersion.value = selectDataList.value[0].vId;
                showFlag.value = true
            })
        }, 200)
    }

    // 版本点击事件
    function vClick() {
        if (showFlag.value) { 
            node_had.value.childNodes = []; //将存起来的node的子节点清空，否则界面会出现重复树
            loadNode(node_had.value, resolve_had.value);//再次执行懒加载的方法
        }
        showFlag.value = true;  // 将绑定在el-tree实例上的标识置为ture,默认是false
    }

    // 懒加载， 请求后台
    function loadNode(node, resolve) {
        console.log("qqq")
        if (node.level === 0) {
            node_had.value = node //将node.level == 0的node存起来
            resolve_had.value = resolve //node.level == 0的resolve也存起来
            getTreeDataInfo({
                'xId': xId.value,
                'parentId': '',
                'vId': treeNodeVersion.value
            }).then(resp => {
                if (resp.code === 200) {
                    resolve(resp.data)
                    scriptManageDialogVisible.value = true;
                }
            })
        } else {
            getTreeDataInfo({
                'xId': xId.value,
                'parentId': node.data.fId,
                'vId': treeNodeVersion.value
            }).then(resp => {
                if (resp.code === 200) {
                    resolve(resp.data)
                    scriptManageDialogVisible.value = true;
                }
            })
        }
    }

Implémentation en arrière-plan :
l'idée est d'interroger toutes les sous-informations sous l'identifiant en fonction de l'identifiant transmis par le frontal. Au lieu de trouver toutes les données, puis de construire une structure arborescente et de la renvoyer au frontal. Le type de valeur de retour est liste

select * from xx where xx.fileId = #{parentId}

Probablement une telle idée.

La description ci-dessus est une opinion personnelle, et vous êtes invités à me corriger si la description est erronée. Si vous avez des questions, veuillez ajouter v 876942434. progresser ensemble ~