el-tree 懒加载复选框默认展开和默认选中

组织树懒加载 多选组织树必须要加的属性

    
            <el-tree
              ref="showTree"
              :data="data3"      //所有的组织树的树形结构数据 必须要加
              :load="loadData"    // load是懒加载必须加的在点击的时候获取数据
              show-checkbox  // 看业务需求是否有复选框的需求
              lazy  //懒加载属性
              check-on-click-node  //只有在点击的时候才会选中复选框
              @check="onCheckChange"   //通过点击事件拿到默认展开的数据和默认选中的数据  拿到这两个数据给后端让后端保存  当前端需要回显的时候在一开始调用接口展示
              node-key="id"  //这个必须要有固定的id值 一方面完整渲染 一方面选中回显使用
              :props="defaultProps"
              :default-checked-keys="defaultCheckedNodes"   
              :default-expanded-keys="defaultExpandedKeys"
            ></el-tree>
            
            
            
            
            
            
         <script> 
         export default {
            data() { 
               return { 
                 //这个字段是根据后端返回来的数据对应是哪个才可以 是树的渲染和使用
                  defaultProps: {
                   children: 'subAreas',
                    label: 'name',
                   isLeaf: 'leaf',
                 },
                 
                  defaultExpandedKeys: [], //默认展开
                  defaultCheckedNodes: [], //默认选中
         
             },
             methods:{
             //loadData 方法是对于懒加的使用当触发的时候会调用接口获取后端数据
             loadData(node, resolve) {
               if (node.level === 0) { 
               return 
               resolve([{ name: 'region' }]); } 
               if (node.level > 1) return resolve([]); 
               setTimeout(() => { 
                 const data = 
                [{ name: 'leaf', leaf: true }, 
                 { name: 'zone' }]; resolve(data); },
               500); 
              },
              onCheckChange(data, node) {
               console.log('onCheckChange', data, node)
               this.halfCheckedKeys = node.halfCheckedKeys
               this.checkedKeys = node.checkedKeys
               }
           }  
         }   
         </script>

对于组织树的默认展开和默认选中，其实归根结底就是一个，查看选中事件，返回来的值将返回的值赋值过去看看是否生效