2021-09-13

问题描述

element中的el-tree树结构
需求是：
①不知道这个树结构有多少层级，数据是点击一级发起一个请求，请求回来的是第二级的数据，点第二级发起一个请求，请求回来的是第三级的数据，以此类推，不知道这个树到底有多少个层级，我使用了el-tree中的懒加载。
②每个树节点前带有一个复选框，点击父节点的复选框不关联子节点的复选框选中。
③我的树结构是在一个弹框中写的，在弹框第一次打开的时候是不选中数据的，选中一些节点关闭弹框再次打开弹框，第一次选中的节点状态还是选中，需求是不选中，所以需要做一次清空选中状态。

树结构形状图

树结构懒加载的实现

第一 树结构

	①show-checkbox	节点是否可被选择，就是带 复选框
	②:check-strictly="true"  选中父节点 不关联子节点的选中
	③lazy	是否懒加载子节点，需与 load 方法结合使用
	④node-key="id" 每个树节点用来作为唯一标识的属性
	⑤setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
	<el-tree :data="treeData"
              show-checkbox 
              :check-strictly="true" 
              lazy
              :load="loadNode"
              ref="tree"
              node-key="id"
              @node-click="handleNodeClick"
              :props="defaultProps">
    </el-tree>
    
    <script>
		data(){
			return{
				treeData:[],
				defaultProps:{
					children:"children",
					label:"label"
				}
			}
		},
		methods:{
			// 加载 树数据   
			loadNode(node, resolve) {        
                let that = this;
                if (node.level === 0) {
                    that.loadtreeData(resolve);
                }

                if (node.level >= 1) {
                    this.getChildByList(node.data.id, resolve);
                    // 防止在该节点没有子节点时一直转圈的问题发生。
                    return resolve([]); 
                } 
			},
			// 获取loadtreeData 就是父节点数据，getChildByList就是异步获取子节点数据
			loadtreeData( resolve) {      
                let params = {ParentID : 0};             
                this.$http({url: "",data: params,type: 'get'}).then(res =>{ 
                    // console.log("商品信息的 tree: ",res)   
                    if(res.success == true) {
                        let data = res.data;
                        // 前者item.参数名称为 prop中的规定的属性名称
                        data.forEach(item => {
                            item.name = item.name;
                            item.parentId = item.parentId;
                            item.id = item.id;
                            item.isLeaf = true;
                        });
                        resolve(data)
                    }else {
                        return false;
                    }    
    
                }).catch(err =>{
                    console.log(err);
                });
			},
			getChildByList( _parentID,resolve) {     // 获取子节点请求
                let params = {ParentID : _parentID};
                this.$http({url: "",data: params,type: 'get'}).then(res =>{ 
                    if(res.success == true) {
                        let data = res.data;
                        data.forEach(item => {
                            item.name = item.name;
                            item.parentId = item.parentId;
                            item.id = item.id;
                            item.isLeaf = false;
                        });
                        resolve(data);
                    } else {
                        return false;
                    }   
                }).catch(err =>{
                    console.log(err);
                });
			},
			 handleNodeClick(data) {          // 节点被点击时的回调      
			   	console.log(data)
			 },
		}
    </script>

第二 el-tree清除已选中的选择项

_that.$refs.role_tree.setCheckedKeys([]);
注意： ①this指向问题 
	  ②在el-tree中定义ref="role_tree" ,在其他地方用this.$refs.role_tree获取该节点