vue+elementUI组件tree如何实现单选加条件禁用_vue.js_

vue+elementUI组件tree单选加条件禁用

elementUI tree：http://element.eleme.io/#/zh-CN/component/tree

官方给出的API还是挺全的，但是示例木有给全，有几个API的说明也不是很能理解～

tree实现带选择框的要加上node-key="id" show-checkbox两个属性，

但是要单选呢？！组件默认如果选中了父节点，相应的子节点也会被选中，要切断关联，那就要加check-strictly这个属性，默认是false，props形式传入设置成true即可～

组件还提供了设置勾选的节点的方法setCheckedKeys，参数接收节点的key，已数组的形式传入

this.$refs.tree2.setCheckedKeys([3]);

有个设置的方法，还需要一个触发的事件以及当前选中的节点数据，刚好API有个check事件，啊！疯狂点赞中～

此方法会传递两个参数，node是当前节点的数据，data选中状态的详情数据，使用如下：

 checkFn(node, data) { console.log(11111, node, data); let checkedKeys = data.checkedKeys; let currKey = node.id; this.$refs.tree2.setCheckedKeys([currKey]); }

使用如上方法就可以完成实现单选

禁用的话，组件提供了props设置disabled，

可以直接以布尔形式设置，也可以函数返回值的形式设置，下面给出两种设置方法的代码～

1. 以布尔形式设置，需要在节点数据里加上disabled属性；

2. 以函数返回值的形式设置，disabled函数会返回当前节点的数据，return一个状态回去就OK～

完结！付上一个完成的代码～

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！