Vue3 uses the tree component of elementplus with the select component to realize the data selected by select changes once and lazy loads the tree information once

Requirement: The data is displayed in a tree structure on the front end, but due to the large data size, it is very slow to return to the front end for rendering, and each set of tree structure data has its own corresponding version, so the solution is to query each version of the data and display it on the front end in the form of select. But there is another problem. Lazy loading only triggers for the first time: the load="loadNode" method does not request the interface, so when switching between different versions, it will not load the corresponding information. The solution is to bind a variable with v-if on the tree instance. The variable defaults to false. When the select changes, set the variable to true, and execute the loadNode method when it is true. A callback parameter with childNodes set to null. The specific implementation is as follows:
page effect:

Front-end implementation:

select selector

<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>

tree lazy loading

<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 回调参数

method

/** 获取树 */
    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;
                }
            })
        }
    }

Background implementation:
The idea is to query all sub-information under the id according to the id passed by the front end. Instead of finding out all the data and then building a tree structure and returning it to the front end. The return value type is list

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

Probably such an idea.

The above description is a personal opinion, and you are welcome to correct me if the description is wrong. If you have any questions, please add v 876942434. progress together~