vue +Tree树形控件小结

1、 懒加载(与 load 方法结合使用 )：

<el-tree :props="defaultProps"  :load="loadNode" lazy  :highlight-current="true"> </el-tree>
//:highlight-current="true"  高亮显示选中的数据
//:current-node-key="1"   当前选中的节点

data () {
	return {
	dataTree: [ {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
       },],
     defaultProps: {
        label: 'deptName',
      },
	}
}

methods: {
 loadNode (node, resolve) { 
        return resolve(dataTree) 
    }
}

2、数据回显：

  <el-tree :props="defaultProps" :data="dataTree" :default-expanded-keys="statusId" ref="tree" node-key="id" show-checkbox :highlight-current="true"> </el-tree>
  //:current-node-key="1"   当前选中的节点
  //:default-expanded-keys="statusId" 设置默认展开的节点的 key 的数组
  //:default-checked-keys="statusId" 设置默认勾选的节点的 key 的数组 
  //node-key="id"  必须要有

  data () {
	return {
	statusId:['1','9'],
	dataTree: [id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }]
          }]
       },],
     defaultProps: {
        label: 'deptName',
      },
	}
}

methods: {
 loadNode (node, resolve) { 
        return resolve(dataTree) 
    }
},
mounted () {
//获取数据
 console.log(this.$refs.tree.getCheckedNodes());
 console.log(this.$refs.tree.getCheckedKeys());
// 设置数据
如果通过 key 来获取或设置，则必须设置node-key
this.$refs.tree.setCheckedKeys(this.statusId); //设置默认选中数据 同上
this.$refs.tree.setCheckedNodes([data])
  }