vue |
您所在的位置：网站首页 › elementui按钮置灰 › vue |
vue
|
目录 el-tree 1、获取选中 2、设置选中 3、全选、清空 4、展开收缩 5、完整代码 el-tree 用来展示树型结构的信息，具备展开和折叠的功能。通过案例介绍相关知识点内容，案例实现的功能如下：
可通过node和key(el-tree中需设置node-key，一般为id)获取选中的节点 设置默认选中id=1的节点
可通过node和key(el-tree中需设置node-key，一般为id)设置选中的节点。 setCheckedNodes设置目前勾选的节点，使用此方法必须设置 node-key 属性(nodes) 接收勾选节点数据的数组 this.$refs.tree.setCheckedNodes([ { id: 2, label: "一级 2" }, { id: 7, label: "二级 3-1" } ]); setCheckedKeys通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false this.$refs.tree.setCheckedKeys([5, 8]); 3、全选、清空①遍历所有的节点，并设置其checked属性为true或false // 获取根节点 let rootNode = this.$refs.tree.getNode(this.treeData[0].id).parent; travelNodes(rootNode); function travelNodes(tmpRoot) { // 选中该节点 tmpRoot.checked = true; // 叶子节点 if (tmpRoot.childNodes.length === 0) { return; } // 不是叶子节点,递归遍历 else { let tmpChildNoes = tmpRoot.childNodes; for (let i = 0; i < tmpChildNoes.length; i++) { travelNodes(tmpChildNoes[i]); } } }②通过设置node或key 注意：当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点；通过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、展开收缩遍历所有的节点，并设置其expanded属性为true或false for (let i = 0; i < this.treeData.length; i++) { this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true; } 5、完整代码 el-tree基本功能 获取选中 设置选中 全选 清空 全选/清空 export default { name: "hello", data() { return { defaultProps: { children: "childList", label: "label" }, treeData: [ { id: 1, label: "一级 1", childList: [ { id: 4, label: "二级 1-1", childList: [ { id: 9, label: "三级 1-1-1" }, { id: 10, label: "三级 1-1-2" } ] } ] }, { id: 2, label: "一级 2", childList: [ { id: 5, label: "二级 2-1" }, { id: 6, label: "二级 2-2" } ] }, { id: 3, label: "一级 3", childList: [ { id: 7, label: "二级 3-1" }, { id: 8, label: "二级 3-2" } ] } ], options: [ { value: "1", label: "展开所有" }, { value: "2", label: "收合所有" } ], value: "展开所有", checkAll: false }; }, methods: { handleNodeClick(data) { // console.log(data); this.$refs.tree.getCheckedKeys(); }, handleCheckChange(data, checked, indeterminate) { // console.log(data, checked, indeterminate); }, //获取选中 getChecked() { // 1.通过node获取 console.log("通过node获取", this.$refs.tree.getCheckedNodes()); // 2.通过key获取 console.log("通过key获取", this.$refs.tree.getCheckedKeys()); }, // 设置选中 setChecked() { // 1.通过node设置 this.$refs.tree.setCheckedNodes([ { id: 2, label: "一级 2" }, { id: 7, label: "二级 3-1" } ]); // 2.通过key设置 // this.$refs.tree.setCheckedKeys([5, 8]); }, // 全选 selectAllNodes: function() { // 获取根节点 let rootNode = this.$refs.tree.getNode(this.treeData[0].id).parent; travelNodes(rootNode); function travelNodes(tmpRoot) { // 选中该节点 tmpRoot.checked = true; // 叶子节点 if (tmpRoot.childNodes.length === 0) { return; } // 不是叶子节点,递归遍历 else { let tmpChildNoes = tmpRoot.childNodes; for (let i = 0; i < tmpChildNoes.length; i++) { travelNodes(tmpChildNoes[i]); } } } }, // 清空 clearAllNodes: function() { this.$refs.tree.setCheckedKeys([]); }, // 全选/清空 //当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点 handleSelectAll() { if (this.checkAll == false) { this.$refs.tree.setCheckedNodes(this.treeData); // this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); this.checkAll = true; } else { // this.$refs.tree.setCheckedNodes([]); this.$refs.tree.setCheckedKeys([]); this.checkAll = false; } }, // 展开收合 selectChange(value) { if (value == 1) { // 展开所有 for (let i = 0; i < this.treeData.length; i++) { this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true; } } else if (value == 2) { // 收合所有 for (let i = 0; i < this.treeData.length; i++) { this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = false; } } } } }; .hello { width: 600px; border: 1px solid rgb(209, 203, 203); border-radius: 6px; margin: 0 auto; padding: 20px; text-align: center; } .btn { margin-top: 20px; } .el-select { margin-left: 10px; width: 120px; }参考：element el-tree
|
【本文地址】
今日新闻 |
推荐新闻 |