首页 > 其他分享 >解决element-ui中el-tree懒加载load只执行一次问题

解决element-ui中el-tree懒加载load只执行一次问题

时间:2023-12-14 16:11:30浏览次数:27  
标签:load el expanded false tableRef tree row 节点 加载

在我们实际开发中,由于后端返回的节点数据量庞大,而用户往往没有要看到所有数据的需求,如果在页面加载中,将页面的所有节点数据都加载出来,无疑是浪费用户宝贵的时间,因此,就有了节点的懒加载的需求,用户想展开哪个节点,我们就给他展示什么数据(异步的从后台发送请求获取当前节点数据然后进行渲染)。

问题描述:

但是,根据官网提供的方法,懒加载只有执行一次,再点击不会重新加载了,这样后端数据有更新,也不会去调接口

解决方案:
采用最少的代码实现,

 <el-table
          ref="table"
          :data="data"
          style="width: 100%"
          :height="tableHeight"
          row-key="menuId"
          lazy
          :load="getChildMenus"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          v-loading="loading"
          @expand-change="handleExpandChange"
        >
</el-table>

//点击获取菜单绑定的接口
    handleExpandChange(row, expanded) {
      if (!expanded) {
        let tableRef = this.$refs.table;
        tableRef.store.states.treeData[row.menuId].loaded = false; //设置为false 
        tableRef.store.states.treeData[row.menuId].expanded = false;
      }
    },

//获取菜单绑定得接口
    getChildMenus(tree, treeNode, resolve) {
    //异步接口调用
  }

  

 

标签:load,el,expanded,false,tableRef,tree,row,节点,加载
From: https://www.cnblogs.com/qinyuanchun/p/17901390.html

相关文章

  • 使用Github+PicGo+JsDelivr搭建图床
    本文主要记录使用PicGo+Github搭建图床,并使用jsDelivrCDN加速;下载安装PicGo#安装包下载地址https://github.com/Molunerfinn/PicGo/releases#官方文档地址https://picgo.github.io/从github上选择稳定版本进行下载,我这里因为使用的是M1芯片的Mac,故选择的是Pi......
  • element ui el-select下拉多选添加全选功能
    //html   <divclass="item">    <spanclass="label">观测要素</span>    <span>     <!--要素组批量处理-多选-->     <el-select v-model="eleTypeList"multiple@change="eleT......
  • vue2 中 el-table 实现树形列表,支持增删改等操作
    需求场景:el-table构造一个树形列表,支持新增节点,删除,修改等操作。实现效果思路 一般的el-table增删改,我们都很熟悉;关键在于实现一个纯前端的树形列表,最终再调接口存列表数据。     树形el-table,需要设置 row-key,一般为id,所以每新增一条数据,都必须有id。需......
  • 05_bootloader开发
    05_bootloader开发需要准备:usb转串口线、SD卡、MINIUSB程序没有运行的时候是放在Nandflash(相当于硬盘)中的,这个地址为程序地址。运行起来的时候是放在DRAM(相当于内存)里的,这个地址为程序链接地址。1.ARM启动顺序1.1.第一个点亮LED的程序(GPIO)参考NoOS(裸机程序)\s......
  • 软件测试/人工智能|selenium元素定位方式大全
    前言当我们在使用selenium进行自动化测试工作时,元素定位是非常重要的一环,因为我们是借助脚本模拟我们通过鼠标和键盘对元素进行点击、输入内容和滑动操作的,所以准确的元素定位是我们执行测试脚本的重要一环。本文就来给大家介绍一下selenium的元素定位方式。find_element和find......
  • 软件测试/人工智能|一文教你配置selenium环境
    前言在软件开发过程中,自动化测试是确保应用程序质量的关键步骤之一。Python语言与Selenium库的结合为开发者提供了一个强大的工具,用于自动化Web应用程序的测试。本文将介绍如何配置Python和Selenium,搭建一个高效的自动化测试环境。Seleium安装我们可以直接在项目的虚拟环境中......
  • 2020CVPR_High-Resolution Image Synthesis with Latent Diffusion Models
    1.AutoEncoderAutoEncoder(自编码器)是一种无监督学习的神经网络模型,用于学习有效的数据表示。它的目标是将输入数据编码成一种潜在的、紧凑的表示形式,然后从这个表示中重构原始输入。自编码器由两部分组成:编码器(Encoder)和解码器(Decoder)。编码器(Encoder):将输入数据映射到潜在表示空......
  • 软件测试/人工智能|解决Selenium中的异常问题:“error sending request for url”
    前言在使用Selenium自动化测试时,有时会遇到“errorsendingrequestforurl”这样的异常。这个问题通常与Chrome浏览器驱动程序和网络请求相关。本文让我们来了解如何解决这个问题。问题原因这个异常通常出现在Selenium与Chrome浏览器交互时,可能由于网络请求或Chrome驱动程序......
  • Delphi Android程序启动过程
    文章转载于不得闲大师的文章,源文链 https://www.cnblogs.com/DxSoft/p/4460236.html Delphi的Android程序是原生的程序,也就是NativeActivity。那么就需要先看一下NativeActivity的原理,在AndroidManifest.xml文件里面指定入口activity为nativeactivity,这样应用程序一启动,jav......
  • js excel操作
    Js操作Excel常用方法Js操作Excel常用方法1.创建一个新Excel表格    varXLObj=newActiveXObject("Excel.Application");    varxlBook=XLObj.Workbooks.Add;                         //新增工作簿    varExcelSheet=xlBook.Wo......