vueelementeltree全选、清空、展开、收缩等基本功能总结

目录

el-tree

1、获取选中

2、设置选中

3、全选、清空

4、展开收缩

5、完整代码

el-tree

用来展示树型结构的信息&＃xff0c;具备展开和折叠的功能。通过案例介绍相关知识点内容&＃xff0c;案例实现的功能如下&＃xff1a;

1、获取选中

可通过node和key(el-tree中需设置node-key&＃xff0c;一般为id)获取选中的节点

设置默认选中id&＃61;1的节点

getCheckedNodes

若节点可被选择&＃xff08;即 show-checkbox 为 true&＃xff09;&＃xff0c;则返回目前被选中的节点所组成的数组

(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数&＃xff0c;1. 是否只是叶子节点&＃xff0c;默认值为 false 2. 是否包含半选节点&＃xff0c;默认值为 false

getCheckedKeys

若节点可被选择&＃xff08;即 show-checkbox 为 true&＃xff09;&＃xff0c;则返回目前被选中的节点的 key 所组成的数组

(leafOnly) 接收一个 boolean 类型的参数&＃xff0c;若为 true 则仅返回被选中的叶子节点的 keys&＃xff0c;默认值为 false

2、设置选中

可通过node和key(el-tree中需设置node-key&＃xff0c;一般为id)设置选中的节点。

setCheckedNodes

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

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

this.$refs.tree.setCheckedKeys([5, 8]);

3、全选、清空

①遍历所有的节点&＃xff0c;并设置其checked属性为true或false

// 获取根节点let rootNode &＃61; this.$refs.tree.getNode(this.treeData[0].id).parent;travelNodes(rootNode);function travelNodes(tmpRoot) {// 选中该节点tmpRoot.checked &＃61; true;// 叶子节点if (tmpRoot.childNodes.length &＃61;&＃61;&＃61; 0) {return;}// 不是叶子节点,递归遍历else {let tmpChildNoes &＃61; tmpRoot.childNodes;for (let i &＃61; 0; i

②通过设置node或key

 注意&＃xff1a;当el-tree设置check-strictly时&＃xff0c;通过setCheckedNodes全选方法失效&＃xff0c;父子不关联&＃xff0c;只能选中一级父节点&＃xff1b;通过key方法需要遍历获得key。

//全选
this.$refs.tree.setCheckedNodes(this.treeData);// this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);//清空// this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setCheckedKeys([]);


4、展开收缩