element-ui tree懒加载时获取节点DOM

tree提供的方法貌似没有可以直接获取节点DOM,或者点击勾选节点响应函数参数node其实只是传入data的数据对象,拿不到DOM,得想想法子来获取之


事情是这样的:最近做一个表单,要能勾选一个二级的下拉数据,于是就想起了element的tree组件,而且二级的数据是要调用接口懒加载展开的,这个应该很多人会遇到这种需求,tree组件即支持勾选框又支持懒加载节点,功能是够用的。

所以起初我是这样用组件的:

<el-tree
:data="exitDataOnlyFirst"
:props="{label: 'name'}"
:load="loadNode"
node-key="code"
:expand-on-click-node="true"
:default-checked-keys="form.checkedKeysSecond"
lazy
ref="dataTree"
show-checkbox>
</el-tree>

注: 我的展示数据大概样子如下:

data = [
{code: 1, name: '一', children: [{code: 11, name:'11'}]}
]

不过,在做编辑修改的时候,遇到这个组件就有点小困难了,虽然它有支持默认勾选节点的属性配置default-checked-keys,不过问题页面第一次加载这个组件的时候,一般来说我只加载第一级的数据,不加载第二级,尽管只要checked-keys设置的匹配,点击第一级展开之后,第二级只要一匹配上就会自动勾选,但显然这多一步的操作无疑不符合正常交互流程也不是很好体验,那只能考虑更直观点的操作了,那就是要能默认展开已经被选的第一级数据下的第二级数据,并勾选上相关节点。

expand-on-click-node一般支持除勾选框外的节点部分点击后展开子节点。

现在要优化的几个点是:

  1. 勾选未展开子节点的一级节点时,能够同时展开二级节点,并勾选上所有
  2. 组件初始化展示data数据时,能展开已经被勾选过的二级节点

针对第一点,其实只要解决勾选一级节点触发展开子节点即可,勾选所有,组件已经实现了的,但上面我也提到过了expand-on-click-node一般支持除勾选框外的节点部分点击才会触发展开,勾选框只负责勾选功能,那怎么让它也触发展开呢,这个时候就需要用到@check-change响应了,

<el-tree
:data="exitDataOnlyFirst"
:props="{label: 'name'}"
:load="loadNode"
node-key="code"
:expand-on-click-node="true"
:default-checked-keys="form.checkedKeysSecond"
lazy
@check-change="treeCheck"
ref="dataTree"
show-checkbox>
</el-tree>

响应函数这么写:

treeCheck(currentData, isCheck) {
    //if (currentData.leaf) return
    if (!currentData.children.length  &&  isCheck) {
        // 点击这个data对应的节点的展开图标
        const  currentCode  =  currentData.code
        const  $current  = Array.from(this.$refs.dataTree.$children).filter($child  => {return  $child.node.data.code  ===  currentCode
    })[0]
        $current.$el.childNodes[0].childNodes[0].click()
    }
}

利用第二个参数isCheck获悉到勾选节点是将其选中,同时该节点还没有children,可作为还未展开过的依据,此时要是check-chage能提供当前节点的dom或者有展开功能函数提供就好了,然而并没有,和同事交流的时候还说要修改源码,有点大费周章的感觉,不过好在查看了整个tree的ref,发现$childrens这个属性,进而发现其node.data刚好是传入的data对象对应的数据,因此,可以利用数据遍历和过滤的方式来一步一步找到对应的dom,只要找到 展开箭头 的图标dom,再手动click一下,就解决了~

有了第一点获取节点dom和对应展开图标dom的经验后,第二点就很好做了,正如一早提到的default-checked-keys告知了组件只要有出现这些key就勾选上,于是第二点的方案就可以定位到 解决展开那些有被勾选中子节点的一级节点上,然后通过遍历和匹配数据获取对应的dom,在手动click展开图标即可,剩下的加载操作,让组件帮你完成。

总结一下tree的几个关键属性:

  1. data: 初始化时传入作为第一级节点数据
  2. load: 懒加载触发的函数,和lazy搭配
  3. expand-on-click: 点击节点触发展开或者收起子节点
  4. default-checked-keys: 告诉组件要默认勾选中的节点的key数组
  5. check-change: 节点选中状态发生变化时的回调
  6. show-checkbox: 显示节点勾选框
  7. ref: 用来获取tree组件的实例和dom

当发现组件api不够用的时候,只要想法设法完成功能,需要用到dom的时候,还需要多多观察。

Image placeholder
peterlengbin
未设置
  22人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery判断dom节点是否存在?

jquery判断dom节点是否存在?jQuery判断DOM节点是否存在页面中1、首先在jquery原型上添加一个exist方法;2、然后在方法内判断当前对象length属性是否大于0,大于就存在;3、

jquery如何判断某个dom节点是否存在?

想要判断某个dom节点是否存在,可以使用length属性来判断。jquery使用length属性判断length属性包含jQuery对象中元素的数目。示例: 这里是i

Kubernetes1.14 版发布,增强了云原生平台的Windows节点支持

Kubernetes1.14GA版本,是开源云原生平台Kubernetes在2019年的一次重大更新。自3月25日开始,这一版本正式推出,供开发者全面使用。  Kubernetes,由云原生计算基金会

使用kubei一步部署k8s高可用集群(包含docker安装、k8s组件安装、master初始化和加入nodes节点)

kubei(kubernetesinstaller)是一个go开发的用来部署kubernetes高可用集群的命令行工具,该工具可在Windows、Linux、Mac中运行kubei原理:通过ssh连接

Elasticsearch负载均衡节点

Elasticsearch负载均衡节点elasticSearch的配置文件中有2个参数:node.master和node.data。这两个参数搭配使用时,能够帮助提供服务器性能。组合一:该node服务

Java并发编程,深入理解ReentrantLock

ReentrantLock简介ReentrantLock重入锁, 是实现Lock接口的一个类 ,也是在实际编程中使用频率很高的一个锁,支持重入性,表示能够对共享资源能够重复加锁,即当前线程获取该锁再次

jQuery怎么删除元素节点?

1、使用empty()删除empty顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点。 p元素1 p元素2 点击通过jQuery的empty移除元素 $("but

从 simplemde 写入 + inline-attachment 图片拖拽上传 到 parsedown 解析

###准备工作安装富文本编辑器sparksuite/simplemde-markdown-editor yarnaddsimplemde--save 安装markedjs/marked,在JS中解析

PHP跌出前十,铁打的 Python 连续3年第一:IEEE Spectrum 2019编程语言排行榜出炉

Python势头不减,依旧第一,而且进一步拉开了与其他语言的差距。这一结果,来自IEEESpectrum2019年度编程语言排行榜。这已经是Python连续3年保持第一。在Python之下,第二交椅的

leveldb源代码分析系列1.1:memtable中comparator的实现

leveldb中memtable封装了一个skiplist用来存储真正的数据,跳跃列表的实现一定需要定义存储项的序关系,而在leveldb中这个序关系通过comparator相关类来实现。leveld

【Kubernetes系列】第5篇 Ingress controller – traefik组件介绍

1.概述为了能够让Ingress资源能够工作,在Kubernetes集群中必须至少有一个运行中的ingresscontroller组件。也就是说如果在kubernetes集群中没有一个ingressc

electron+vue实现div contenteditable功能|截图

最近在学习基于electron+electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能。一般通过input或textarea也能实现,通过插入[笑脸]、(:12这些标签,展示的时候解

解放劳动力,拒绝crud【基于element-ui的表格模版】

缘起在开发后台管理系统页面时,用得最频繁的莫非:表格+表单+分页+搜索。常规操作流程: 表格组件 分页组件 弹出层组件+表单组件一套 搜索栏表单组件一套 一把梭下来写了很多样版式代码,风格可能还不统一

Element-UI 导航菜单,部分贴底

如下图,导航一二三四的高度小于100%时,接口文档贴底,大于100%时,接口文档显示在最底端。其实类似于FooterStick,但是由于导航菜单子组件的某些属性,已有的FooterStick解决方案并

笔记:element固定表头的表格,如果表格太宽了拉到最右侧会出现表头和内容不对齐的情况

在顶级样式文件里面加下面的代码.el-table--borderth.gutter:last-of-type{ display:block!important; width:8px!important

解决Element UI input输入框不能使用回车进行搜索

因为使用vue修饰符绑定键盘事件报错,不知道怎么解决...所以想出了一个神奇的解决方法...1、绑定输入事件,每次输入就把输入的内容存到本地储存 //输入搜索内容 inputSearchInfo(

leveldb源代码分析系列1:MemTable的实现

MemTable及其实现这是一个第零层的主题,预计扩展如下第一层主题:1.1comparator介绍1.2skiplist实现介绍1.3数据压缩相关介绍1.4Put流程1.5Get流程leveldb中

DeepFakes进化版DeepNude惊现!一键“脱衣“,火到宕机

大数据文摘出品作者:蒋宝尚、赵伟人工智能的黑暗面能有多黑?这边DeepFake带来的余震还没有被平息,本周,又一AI偏门应用爆出,一键直接“脱掉”女性的衣服!海外媒体Motherboard测试图片显然

IEEE态度转变:解除对华为评审限制

大数据文摘出品作者:周素云、魏子敏IEEE的态度发生变化。今晨,IEEE电气电子工程师学会中国官网及官方公众号同时发出声明,表示IEEE向美国商务部要求就出口管制条例在IEEE出版活动的适用性做出说明

IEEE官方禁止华为参与期刊审稿,当全球最大技术学术机构向政治弯腰

大数据文摘出品作者:魏子敏、宋欣仪5月29日,作为全球最大专业技术组织之一的IEEE(电气和电子工程师协会)被曝出,在发给会员的内部邮件中禁止华为员工作为旗下期刊杂志的编辑和审稿人。今天早晨,IEEE

php常用字符串查找函数strstr()与strpos()实例分析

这篇文章主要介绍了php常用字符串查找函数strstr()与strpos(),结合具体实例形式分析了php字符串查找函数strstr()与strpos()的具体功能、用法、区别及相关操作注意事项,需要

Java 8 Stream Api 中的 peek 操作

1.前言 在Java8StreamAPI详细使用指南中讲述了Java8StreamAPI中map操作和flatMap操作的区别。然后有小伙伴告诉我peek操作也能实现元素的处理。但是你知道map和pe

工具分享:Linux tree 命令安装和使用

说明tree命令是一个比较实用文件系统查看工具,如下图,可以阶梯式地罗列某个目录下的所有子目录:如何安装?RHEL/CentOS下:#yuminstalltree-yDebian/Ubuntu, Mi

124. Binary Tree Maximum Path Sum - 二叉树中的最大路径和

1描述给定一个非空二叉树,返回其最大路径和。路径:一条从树中任意节点出发,达到任意节点的序列。该路径至少包含一个节点,且不一定经过根节点。用例 输入:[1,2,3] 1 /\ 23 输出:6输入:

从词袋到transfomer,梳理十年Kaggle竞赛,看自然语言处理的变迁史

大数据文摘出品来源:medium编译:LYLM、胡笳自2010年创办以来,Kaggle作为著名的数据科学竞赛平台,一直都是机器学习领域发展趋势的风向标,许多重大突破都在该平台发生,数以千计的从业人员参