位置: IT常识 - 正文

element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选

编辑:rootadmin
背景 项目中用到了vue的element-ui框架,用到了el-tree组件。由于数据量很大,使用了数据懒加载模式,即异步树。异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或者方法可以使用。 经过调试与阅读elment-ui源码才发现有现成 ...

推荐整理分享element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

背景

项目中用到了vue的element-ui框架,用到了el-tree组件。由于数据量很大,使用了数据懒加载模式,即异步树。异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或者方法可以使用。 经过调试与阅读elment-ui源码才发现有现成的方法可以进行结点展开。下面就介绍结点展开的实现!

1.监听复选框点击事件check

<el-tree :props="mulprops" :load="loadNode" lazy node-key="id" show-checkbox accordion @current-change="currentChange" :filter-node-method="filterNode" @check="handleCheck" ref="tree" :default-checked-keys="defaultCheckedNodes" :default-expanded-keys="defaultExpandedNodes" > </el-tree>

2.手动展开,使用node.expand()方法

handleCheck(nodeData, treeChecked) { let node = this.$refs.tree.getNode(nodeData.id) //将选中的未展开的节点进行展开 if(node.checked && !node.expanded){ node.expand(function(){ for(let i=0; i< node.childNodes.length; i++){ node.childNodes[i].expand() } }) } }element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选

项目中的实现

一、复选框勾选后能自动展开并选中,先展开再勾选也可以自动展开

1.监听check-change事件

<el-tree :props="mulprops" :load="loadNode" lazy node-key="id" show-checkbox accordion @check-change="handleCheckChange" :filter-node-method="filterNode" ref="tree" :default-checked-keys="defaultCheckedNodes" :default-expanded-keys="defaultExpandedNodes" > </el-tree>

2.编写展开勾选结点方法

handleCheckChange(nodeData, nodeSelected) { let tree = this.$refs.tree; let node = tree.getNode(nodeData.id) //展开选中的未展开的节点 this.expandCheckedNotExpandNodes(node); //具体业务实现 console.log(nodeData, nodeSelected) }, //展开选中的未展开的节点 expandCheckedNotExpandNodes(node) { let tree = this.$refs.tree; if (node.checked && !node.expanded && !node.isLeaf) { node.expand(function () { let childNodes = node.childNodes; for (let i = 0; i < childNodes.length; i++) { let childNode = childNodes[i]; //手动触发check-change事件,事件处理函数中回继续调用此函数,形成递归展开 tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate); } }) } },

二、 展开指定结点

<el-input type="text" v-model='nodeDataIds' placeholder="请输入结点数据ID(多个以逗号分割)"> ></el-input> <el-button type="primary" @click="expandNodes(nodeDataIds.split(','))">展开指定结点</el-button> //展开匹配的结点,根结点默认展开 expandNodes(nodeDataIds){ let that = this; let tree = this.$refs.tree; let rootNode = tree.root; //展开一层结点函数 let expandRootChildren = function(){ let childNodes = rootNode.childNodes; for (let i = 0; i < childNodes.length; i++) { let childNode = childNodes[i]; that.expandNode(childNode,nodeDataIds); } }; //根结点未展开进行展开 if(!rootNode.expanded){ rootNode.expand(function(){ //展开根结点的孩子 expandRootChildren(); }); }else{ //展开根结点的孩子 expandRootChildren(); } }, //展开指定结点下匹配的结点 expandNode(node, nodeDataIds){ let that = this; //当前结点需要展开未展开,则展开 if(nodeDataIds.indexOf(node.data.id) != -1){ //孩子结点需要展开未展开,则展开 let expandChildren = function(){ let childNodes = node.childNodes; for (let i = 0; i < childNodes.length; i++) { let childNode = childNodes[i]; //递归展开孩子结点 that.expandNode(childNode, nodeDataIds); } } if(!node.expanded){ node.expand(function(){ expandChildren(); }); }else{ expandChildren(); } } },

三. 勾选指定结点

1.异步树,需先展开指定结点,然后有数据了才能勾选上(即:展开父结点,子节点有了数据才能勾选上)

<el-button type="primary" @click="checkNodes(nodeDataIds.split(','))">选中指定结点</el-button> checkNodes(nodeDataIds){ let tree = this.$refs.tree; tree.setCheckedKeys(nodeDataIds, false) }

2.设置默认勾选的结点,首次展开会自动勾选上,适合写数据回显

default-checked-keys=['node001','node002']
本文链接地址:https://www.jiuchutong.com/zhishi/310137.html 转载请保留说明!

上一篇:为你的WordPress添加图片替换功能 Enable Media Replace(wordpress!)

下一篇:Python中包如何发布?(python包发布)

  • word怎么插入封面(怎么在word里插封面)

    word怎么插入封面(怎么在word里插封面)

  • 蚂蚁庄园种麦子是什么意思(蚂蚁庄园种麦子最多能种多少)

    蚂蚁庄园种麦子是什么意思(蚂蚁庄园种麦子最多能种多少)

  • 电脑能连机顶盒吗(电脑连机顶盒不然开不了机)

    电脑能连机顶盒吗(电脑连机顶盒不然开不了机)

  • xps数据用什么软件打开

    xps数据用什么软件打开

  • moaal20是华为什么型号(华为moa-al20图片及价钱)

    moaal20是华为什么型号(华为moa-al20图片及价钱)

  • 8p后盖碎了漏电吗(8p后盖碎了漏电怎么办)

    8p后盖碎了漏电吗(8p后盖碎了漏电怎么办)

  • 微信先拉黑再删除和直接删除的区别(微信先拉黑再删除对方怎么显示)

    微信先拉黑再删除和直接删除的区别(微信先拉黑再删除对方怎么显示)

  • 快手账号异常需要激活(快手账号异常需要实名激活)

    快手账号异常需要激活(快手账号异常需要实名激活)

  • 苹果11充满电需要多久(苹果11充满电需要多少电费)

    苹果11充满电需要多久(苹果11充满电需要多少电费)

  • 苹果8是玻璃后盖吗(苹果8玻璃后盖更换教程)

    苹果8是玻璃后盖吗(苹果8玻璃后盖更换教程)

  • windows版本有哪些(windows的所有版本)

    windows版本有哪些(windows的所有版本)

  • 怎样判断qq对方拉黑(怎样判断qq对方屏蔽)

    怎样判断qq对方拉黑(怎样判断qq对方屏蔽)

  • 华为手机的通话录音文件在哪里可以找到(华为手机的通话记录删除了怎么恢复)

    华为手机的通话录音文件在哪里可以找到(华为手机的通话记录删除了怎么恢复)

  • 鼠标上的键都有哪些(鼠标上那么多键干嘛的)

    鼠标上的键都有哪些(鼠标上那么多键干嘛的)

  • 手机怎么连接电脑宽带(手机怎么连接电脑传输照片与文件)

    手机怎么连接电脑宽带(手机怎么连接电脑传输照片与文件)

  • 一加七pro有耳机孔吗(一加7pro插耳机)

    一加七pro有耳机孔吗(一加7pro插耳机)

  •  正在拼单怎么取消订单(正在拼单怎么取消订单)

    正在拼单怎么取消订单(正在拼单怎么取消订单)

  • iphone xs max有nfc吗(iPhone XS Max有NFC吗)

    iphone xs max有nfc吗(iPhone XS Max有NFC吗)

  • QQ音乐免流量服务怎么解除(qq音乐免流量服务干嘛的)

    QQ音乐免流量服务怎么解除(qq音乐免流量服务干嘛的)

  • 抖音上歌曲怎么设置为铃声(抖音上歌曲怎么下载到手机)

    抖音上歌曲怎么设置为铃声(抖音上歌曲怎么下载到手机)

  • 千牛卖家中心在哪里(千牛卖家中心在哪里找到)

    千牛卖家中心在哪里(千牛卖家中心在哪里找到)

  • IAM.exe进程能不能删除 有哪些用处(java.exe进程可以关掉吗)

    IAM.exe进程能不能删除 有哪些用处(java.exe进程可以关掉吗)

  • 模型调参常见问题及Aadm优化器调参记录(模型参数是什么意思)

    模型调参常见问题及Aadm优化器调参记录(模型参数是什么意思)

  • 深究Python中的asyncio库-线程并发函数

    深究Python中的asyncio库-线程并发函数

  • 缴纳增值税做账
  • 税收优惠指什么
  • 公司之间借款如何做账
  • 水电费分析小报
  • 销项税额和进项税额发票怎么区别
  • 科目余额表凭证号顺序
  • 应付票据与应付账款
  • 累计折旧空运直接计入生产成本吗
  • 贴现率和折现率相等吗
  • 企业中征码怎么办
  • 公司名称变更发票还能认证吗
  • 买车支付的车辆购置税怎么入账
  • 自建办公楼销售要交土地增值税吗
  • 企业购买房产如何列入投资计划的
  • 一般纳税人城建税怎么计算
  • 公司的日常开销开发票怎么写
  • 印花税申报表如何填写
  • 先开票后预缴能跨年吗
  • 用友t3建新账
  • 专项维修基金和契税有什么区别
  • 税务机关核定征收契税
  • 资产处置损失减少的原因
  • 增加资产的会计科目
  • 增值税专用发票税号错误
  • 1697511215
  • 视同买断委托代销如何确认纳税时间?
  • 小规模减免的增值税汇算清缴
  • 支付宝账户记录
  • 无法访问windows installer服务,没有正确安装
  • 待摊费用计入哪里
  • igfxhk.exe是什么进程
  • 利息收入增值税确认时点
  • 政府搬迁补偿款怎么算
  • 罚款是否需要开发票
  • php框架symfony
  • 金融机构同业外汇存款账户管理办法
  • php实现页面浏览量
  • 黄石国家公园的英文翻译
  • 刚购入的固定资产怎么算
  • 微信小程序授权管理在哪里
  • 工资外一次性收入88000交多少税
  • 库管和车间工人哪个好
  • 现金发放工资会计科目怎么写
  • 《中华人民共和国治安管理处罚法》
  • 新成立的小公司财务怎么管理
  • 经营租入的设备属于什么会计要素
  • 公章损坏如何更换
  • 运输公司的车辆如何计提折旧
  • 可供出售金融资产公允价值变动
  • 公司销售商品怎么做分录
  • 以前年度少计提的工资怎么处理
  • 以前年度损益调整
  • 小规模纳税人免税政策
  • 挂靠被查出来后挂靠费怎么处理?
  • 出口退税转为免税处理有损失吗
  • 高价购买股权
  • 新成立的公司发朋友圈文案
  • 银行账与实际账不符
  • 单位购入车辆能抵扣吗
  • 采购成品油会计分录
  • 公司股东借款转私人账户
  • 会计账簿的装订绳子
  • SQL Server Alwayson创建代理作业的注意事项详解
  • 检查mysql是否正常
  • Mysql执行sql文件
  • win7下安装ubuntu
  • 电脑操作系统32位和62位怎么升级
  • solaris删除文件命令
  • tr linux 命令
  • 如何设置macbook
  • windows 10为什么不能关掉自动更新
  • 如何彻底删除超级QQ秀
  • linux怎样使用
  • javascript基础教程教材答案
  • android2d游戏开发
  • 介绍一个简单的实验
  • 纽约消费税多少
  • 内蒙古税务总局网站官网
  • 1国家税务总局
  • 基本账号信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设