位置: 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包发布)

  • 个人所得税C表怎么填写
  • 土地价款抵扣增值税怎么做账
  • 价外费用是含税价还是不含税价
  • 医疗设备的折旧年限是多少年
  • 一般纳税人利润100万要交多少税
  • 建筑行业异地工资怎么算
  • 土增税土地成本分摊方法
  • 成本会计实训要求
  • 收取车辆使用费怎么做账
  • 专项资金审计的目的
  • 计提坏账准备为什么要加借方
  • 过渡性税收优惠是什么意思
  • 存货残料收入账务处理?
  • 金税设备维护费账务处理
  • 委托加工模具的费用计入什么科目?
  • 旧货如何卖
  • 营改增后超市陈列费账务处理
  • 农产品没有进项税怎么算
  • 信用减值损失借贷方向增减
  • 减免税款交企业所得税吗
  • 土地出让金怎么入账
  • 企业取得代扣代缴个税手续费分录
  • 进口海运费增值税发票 抵扣
  • 申报印花税填表过程
  • 个人所得税适合月度税率表有哪些
  • 金蝶k3迷你版年度结账
  • 建筑劳务预缴税款后怎么申报
  • 固定资产的确认条件有哪些
  • 财政拨款事业单位和全额事业单位
  • 国产linux系统有哪些
  • 土地出让金可以代缴吗
  • incorrect email format
  • rftray.exe - rftray是什么进程 有什么用
  • 转让二手设备如何交易
  • 公司员工培训后的收获和感想
  • 前端常用插件汇总
  • 发财树的养殖方法和浇水时间
  • php的array函数
  • 企业的各项费用
  • 进口增值税的账务处理
  • 进项税额转出余额在贷方怎么处理
  • 固定资产清理科目核算内容
  • java web购物系统
  • vue中过滤器有什么作用及详解
  • 领航ct
  • 专项资金怎么填表
  • 库存周转率会大于1吗
  • 小规模申报增值税减免税申报明细表
  • 石油预付款发票怎么开
  • 天猫如何不走对公账户
  • wordpress如何删除导入的主题
  • 物业增值服务主要有哪些
  • 劳务报酬需要申报个税吗
  • 购入不动产进项税额怎么抵扣
  • 付款人和开票人必须相符吗
  • 专项应付款和政府补助的区别
  • 滴滴打车开具的普通发票可以抵扣吗
  • 增值税运费发票清单怎么开
  • 蓝字发票作废流程视频
  • 餐饮行业纸巾入库流程
  • 购买机器的会计分录
  • 未实现融资收益借贷方向
  • 零申报必须会计吗?自己可以操作吗
  • sqlserver数据类型怎么用
  • Windows时间同步时出错该怎么解决?
  • sstray.exe - sstray是什么进程 有什么作用
  • ,linux
  • linux系统的服务器,重启之后运算速度变慢
  • win7磁盘空间不足怎么清理文件
  • linux用什么版本
  • epipe错误
  • 代码sd是什么意思
  • unity备份工程
  • unity与android交互详细
  • js保存设置
  • position属性含义
  • js短信验证码60s倒计时
  • 网上申报成功怎么查询
  • 北京市国家税务局
  • 土地增值税分期清算条件?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设