vue3 使用elementplus的tree组件搭配 select组件 实现select选中的数据变化一次就去懒加载一次树信息

需求：数据以树的结构展示再前端，但由于数据过大，返回到前端渲染的时候很慢，并且每一套树结构的数据都有各自对应的版本，于是解决方法是将数据的每个版本都查询出来，以select的形式展示在前端， 前端通过下拉选择的方式去查找同一数据的不同版本的信息并以树的结构展示到前端。但是这样又出现一个问题，懒加载只在第一次触发 :load=“loadNode” 方法后就不在请求接口，那切换不同的版本时也就不会去加载对应的信息，解决方法是首先在tree实例上用v-if绑定一个变量，该变量默认为false，当select发生变化时，将其变量置为true,并且为ture的时候执行loadNode方法，在执行loadNode方法时将该方法的回调参数存起来，再下次点击select选择器时 再将loadNode方法的第一个回调参数的childNodes 置为空。具体实现如下：
页面效果：

前端实现：

select选择器

<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懒加载

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

变量

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

方法

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

后台实现：
思路就是根据前端传递的id去查询该id下的所有子信息就行。而不是将所有数据都查出来再构建树结构返回给前端。返回值类型为list

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

大概就是这么一个思路。

以上描述是个人见解，描述有误的地方欢迎大家指正。有问题可加 v 876942434。一起进步~