当前位置: 首页 > news >正文

element ui Tree树形控件

  1. lazy 是否懒加载子节点,需与 load 方法结合使用 boolean 默认为false
  2. load 加载子树数据的方法,仅当 lazy 属性为true 时生效 function(node, resolve)
  3. 使用懒加载load不需要再使用data,利用resolve返回值即可
  4. 注意:第一层的数据要写在node.level == 0

HTML部分

 <el-treeshow-checkboxnode-key="id"lazy  //必须:load="loadNode" //必须:default-expand-all ="false":expand-on-click-node="false":render-content="renderContent"></el-tree>

js部分

data(){return{props: {label: "name",   //显示在页面上的值的属性名children: "zones", //表示该组件的子节点数据存储在"zones"属性中isLeaf: "leaf",//表示该组件的叶子节点数据存储在"leaf"属性中}
}
},
computed:{advertList(){return this.$store.state.advert.advertList}methods:{  // 此处只举例了两层loadNode(node, resolve) {//第一层if (node.level === 0) {this.getAdveData(resolve);}//第二层if (node.level  ==  1) {this.getchildData(node,resolve);}//其余返回空 ,一定要加这个判断,否则会一直执行懒加载函数else{return resolve([])}
},
//第一层的逻辑async getAdveData(resolve){try {await this.$store.dispatch('advert/getAdvert')return resolve( this.advertList);} catch (error) {console.warn(error);}},//第二层的逻辑async  getchildData(node,resolve){try {let params = {id:node.data.pid}await this.$store.dispatch('advert/getAdvert',params)return resolve( this.advertList);} catch (error) {console.warn(error);}}}
http://www.lryc.cn/news/349979.html

相关文章:

  • AI 绘画神器 Fooocus 图生图:图像放大或变化、图像提示、图像重绘或扩充、反推提示词、生成参数提取、所需模型下载
  • yolov8 模型架构轻量化 | 极致降参数量
  • uniapp 小程序低功耗蓝牙配网 ble配网 物联网
  • 服务器防火墙有什么用防护策略
  • 27.哀家要长脑子了!
  • Redis实战—验证码登录注册
  • 对话机器人技术解说
  • 红黑树底层封装map、set C++
  • 压力给到 Google,OpenAI 发布 GPT-4o 来了
  • 【SpringSecurity源码】过滤器链加载流程
  • 第9章.Keil5-MDK软件简介
  • mysql中utf8字符集中文字节长度统计如何统计到2个字节一个汉字
  • 如何实现Linux双网卡同时连接内网和外网的配置?
  • ASCLL码表以及字符的相加减
  • 一键修复所有dll缺失,教大家解决丢失的dll文件
  • wsl2安装rancher并导入和创建k8s集群
  • 内网环境ubuntu设置静态ip、DNS、路由,不影响网络访问
  • 学习前端第三十七天(静态属性静态方法、类检查、错误处理)
  • 全网最全的基于电机控制的38类simulink仿真全家桶----新手大礼包
  • Python使用asyncio包实现异步编程
  • 获取文件夹下的vue文件形成组件,require.context
  • 2024软件测试必问的常见面试题1000问!
  • C++列表实现
  • 论文合集整理推荐2024.5.15
  • JavaScript的跳转传参方式
  • 非阻塞模式下的读写操作
  • Google Ads谷歌广告账户被封停怎么办?
  • AI大模型探索之路-训练篇23:ChatGLM3微调实战-基于P-Tuning V2技术的实践指南
  • 掌握核心概念:Java高级面试难题精解(一)
  • Nagle算法