首页 > 其他分享 >Element Plus el-tree懒加载默认选中

Element Plus el-tree懒加载默认选中

时间:2023-10-30 17:12:36浏览次数:26  
标签:node el resolve const await tree Element data id

百度上试了很多方法,设置default-expanded-keys不生效,最后使用了下面的方法,亲测有效

const loadNode = async (node: Node, resolve: (data: AreaType[]) => void) => {
  if (node.level === 0) {
    const {data} = await getRegionList(areaOptions)
    if (!props.special) {
      for (let i = 0; i < 4; i++) {
        data[i].isLeaf = true;
      }
      emit('checkNode', data[0].id, data);
      await nextTick(() => {
        treeRef.value?.setCurrentKey(data[0].id);
        return resolve(data);
      });
    } else {
      resolve(data) //先接收数据 重点,不然获取不到节点
      const node = treeRef.value?.getNode(data[0].id) //获取要展开的父节点,这边业务要求是展开第一个节点,我这边只有层级两层,层级更深的在node.level>=1中调整逻辑
      node?.expand() //调用节点的展开,会再次触发loadNode,相当于模拟了一次节点点击
      return
    }
  }
  if (node.level >= 1) {
    areaOptions.parentId = node.data.id;
    const {data} = await getRegionList(areaOptions)
    data.forEach(item => {
      item.isLeaf = true;
    });
    if(props.special){
      await nextTick(() => {
        treeRef.value?.setCurrentKey(data[0].id)
        emit('checkNode', data[0].id, data);
      })
    }
    return resolve(data);
  }
};

参考https://blog.csdn.net/lixiang10188/article/details/129179962

标签:node,el,resolve,const,await,tree,Element,data,id
From: https://www.cnblogs.com/cstd/p/17798294.html

相关文章

  • el-table选中效果及动态修改
    项目有个需求,是点击关联账户,弹窗显示已经关联的,而且表格上还要勾上效果: 这里的交互有两条线:1.勾选表格内容,上方标签显示和隐藏2.删除上方标签,表格中的该条数据去除选中效果......
  • kernel-devel下载地址
    https://ftp.sjtu.edu.cn/sites/ftp.scientificlinux.org/linux/scientific/7.9/x86_64/os/Packages/rpm-ivhxxx.rpm#yuminstallgcc#yuminstallgcc-c++......
  • Linux21--shell编程基础
    1bashshell介绍#介绍shell是一门解释型、弱类型、动态语言#类比shell语法<===>python语法bash解释器<===>python解释器平台<===>平台2变量2.1基本使用###交互式环境中[root@localhost~]#x=1#1定义变量中间不能有空......
  • FastReport 导出Excel、Word、Pdf
    privatevoidExportPDF(H_HistoryDataModelmodel){try{//createreportinstanceReportreport=newReport();PrepareReport(report,model);//createexpor......
  • QTreeWidget 添加右键菜单
    有时需要为QTreeWidget的子条目添加右键菜单功能,主要有两种方案来实现:方案一该方案比较通用,通过为QTreeWidget建立信号槽,在接受itemPressed的信号时会被触发,然后判断当前是否为鼠标右键,若为鼠标右键则创建添加对应的菜单栏,并提供相应的功能。//1.QTreeWidget*tree为......
  • vue3 + vite 的Excel表格的导入导出
    一、安装XLSX插件yarnaddxlsx或者npmixlsx二、引入插件在你需要的页面或者在main.js中引入import*asXLSXfrom'xlsx'三、导出Excel3.1核心api①xlsx.utils.book_new() 新建工作簿② xlsx.uti......
  • ELK 不香了!我用 Graylog,轻量多了...
    作者:Escape来源:https://www.escapelife.site/posts/38c81b25.html服务日志收集方案:Filebeat+Graylog!当我们公司内部部署很多服务以及测试、正式环境的时候,查看日志就变成了一个非常刚需的需求了。是多个环境的日志统一收集,然后使用Nginx对外提供服务,还是使用专用的日志收......
  • shell脚本里如何设置Python的环境变量
    在shell脚本中设置Python的环境变量可以通过以下几个步骤来完成。首先,需要确定Python的安装路径。可以通过以下命令来查找Python的安装路径:该命令会返回Python可执行文件的路径,例如:/usr/bin/python。whichpython接下来,将Python的安装路径添加到PATH环境变量中。PA......
  • PowerShell系列(七)PowerShell当中的Provider介绍
    今天给大家讲解PowerShell当中的非常重要的概念Provider相关的知识,希望对大家能有所帮助!1、Provider概念介绍 PowerShell Provider是基于NetFrameWork运行的一个框架,它的作用是让数据(文件、注册表环境对象等等)以特殊的方式保存在PowerShell里面,然后可以直接通过脚本命令查看和管......
  • 解决kubernetes flannel部署的具体操作步骤
    原文:https://blog.51cto.com/u_16175446/6683522KubernetesFlannel部署教程作为一名经验丰富的开发者,我将向你介绍在Kubernetes中部署Flannel网络插件的步骤和所需的代码。Flannel是一个用于Kubernetes集群的网络解决方案,它负责为Pod提供网络互通。整体流程以下是部署Kubernete......