el-tree设置利用setCheckedNodessetCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点

实现目标：在生成el-tree时，默认勾选其中某几个选项；或在进行某个选项的选中时，同时勾选上另一个选项。

实现效果：

在生成树结构时，默认勾选其中的两个选项。

在勾选其中一个选项时，另一个选项也被同时勾选。

实现方法：

<el-tree:data="data"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps">
</el-tree>

一、设置生成el-tree时默认勾选：两种方法

1.通过node设置

setCheckedNodes

设置目前勾选的节点，使用此方法必须设置 node-key 属性

(nodes) 接收勾选节点数据的数组

setCheckedNodes() {this.$refs.tree.setCheckedNodes([{id: 5,label: '二级 2-1'}, {id: 9,label: '三级 1-1-1'}]);},

2.通过key设置 :里面为数组

setCheckedKeys

通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性

(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为true则仅设置叶子节点的选中状态，默认值为false

setCheckedKeys() {this.$refs.tree.setCheckedKeys([3, 5]);},

二、在勾选某一选项时，另一个选项也默认被勾选

勾选一个选项所触发的事件为：

check-change

节点选中状态发生变化时的回调

共三个参数，依次为：传递给data属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点

<el-tree:data="data"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"@check-change="handleCheckChange" // 这一行为选中某选项所执行的方法
>
</el-tree>

另一个选项也默认被勾选：

setChecked

通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性

(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点，默认为 false

handleCheckChange(data, checked, indeterminate) {checked ? this.aMethods(data, true) : this.aMethods(data, false)},
aMethods(item,bool){if(bool){this.$refs.tree.setChecked(5, true)}else{this.$refs.tree.setChecked(5, false)}
}

这样就实现了上述效果。更多内容可参考Element官网。

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

el-tree设置利用setCheckedNodessetCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点相关推荐

tree父节点不被选中和勾选(所以父节点)只选择子节点
tree父节点不被选中和勾选(所以父节点)只选择子节点 t = $.fn.zTree.init(t, setting, result); var zTree = $.fn.zTree.getZTree ...
电脑同时安装了WPS和Office，怎么设置文件的默认打开方式？
Microsoft Office是微软公司的一款办公软件,学习工作中的必备工具.WPS则是由金山推出的新兴免费国产办公软件,也非常的好用,可以手机.平板.电脑三端同步. WPS的功能相对可能会较多,用 ...
MyEclipse设置JSP页面默认编码方式
MyEclipse设置JSP页面默认编码方式以及设置在Java文件中作者.日期等说明 MyEclipse设置JSP页面默认编码方式: windows(窗口)-Preferences(首选项)-MyEc ...
设置Jupyter notebook 默认工作路径，修改Jupyter notebook 默认浏览器为Chrome
这里写目录标题一设置Jupyter notebook 默认工作路径二修改Jupyter notebook 默认浏览器为Chrome 一设置Jupyter notebook 默认工作路径安装 ...
word勾选框涂黑和打勾
word勾选框涂黑和打勾写个博客记录一下,这种技巧很久才用一次,老是记不住像这种勾选框,我们需要把想选的选项要么勾起来,要么涂黑 (一)涂黑假设要选"全日制",就把光标放在全 ...
谷歌浏览器怎么将迅雷设置为默认下载方式谷歌浏览器设置迅雷为默认下载的教程
谷歌浏览器怎么将迅雷设置为默认下载方式?现在的浏览器有很多,谷歌浏览器就是其中的一种.想要将迅雷设置为谷歌浏览器的默认下载方式,具体该怎么操作?下面就是谷歌浏览器设置迅雷为默认下载的教程,一起来看一下 ...
excel不显示0_进销存软件如何设置仓库库存查询默认不显示库存为0的商品？常见问题文章中心信管飞软件官网...
信管飞仓库管理软件.信管飞RMS支持管理仓库库存,可在仓库库存查询界面查询当前商品库存数量,软件支持设置在仓库库存查询时默认不显示库存为0的商品,方便汇总有库存的商品信息.本文以信管飞RMS为例,示范 ...
如何设置xp开机默认登陆账户
如何设置xp开机默认登陆账户一.命令: 开始菜单中在运行中输入"control userpasswords2"并回车,打开用户账户对话框,在用户选项卡上取消对"要使用本 ...
WPS与OFFICE同时存在，怎么设置office为默认打开方式？
WPS与OFFICE同时存在,怎么设置office为默认打开方式? 1.左下角开始程序找到WPS OFFice-->wps office工具-->配置工具 2.高级->兼容设置,取消 ...

el-tree设置利用setCheckedNodessetCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点

el-tree设置利用setCheckedNodessetCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点相关推荐

最新文章

热门文章