1.template中编写

<el-form-item label="机构权限" prop="deptId">
                        //收集回显的值
     <el-select v-model="form.deptName"  placeholder="请选择" :popper-append-to-body="false" 
     style="float: left; width: 100%">
                        //option的值 这里是当前tree选中的键值 与select收集的键对应
          <el-option :value="selectTree" disabled>
                        //:data="list" 是树的值
                        //:props="defaultProps" 数据的键名设置
                        //:load="loadNode" 与 lazy配合使用 首次加载就会触发 其中包含选中节点数据，在此方法中发请求
                        //:expand-on-click-node="false" 是否点击箭头进行展开
                        //check-on-click-node 是否点击节点可以选中
                        //@check-change="handleNodeClick" 点击每一个节点会触发
                <el-tree :data="list" :props="defaultProps" ref="tree" :load="loadNode"
                lazy :expand-on-click-node="false" node-key="id" check-on-click-node
                  @check-change="handleNodeClick"></el-tree>
         </el-option>
      </el-select>
</el-form-item>

2.js中

 data() {
    return {
      //option的数据
      selectTree: [],
      //设置树收集的键名 
      defaultProps: {
        children: 'children',
        label: 'deptName',=====》树要显示的接口键名
        isLeaf: (data, node) => {
            //根据后台返回的数据判断是否还有下级 是否显示箭头图标
            //el-tree懒加载无子级数据时去掉下拉箭头
            if(data.hasChildren === false) {
                return true
            }
        },
      },
      //树的数据
      list: [],
    };
  },
 methods:{
   //点击树的每一个节点触发
   handleNodeClick(data, self, child) {
      let datalist = this.$refs.tree.getCurrentNode()
      this.selectTree.push({ id: datalist.id, label: datalist.deptName })
      this.form.deptName=datalist.deptName
      this.form.deptId=datalist.id
    },
   //树的懒加载主要是获取当前选择数据的信息进行后续调用接口
   loadNode(node, resolve){
      //页面首次加载会触发 首次加载数据
      let id=node.data.id?node.data.id:0
      getLazyList(id).then(res => {
          if(node.childNodes.length){
            resolve([])
          }else{
            resolve(res.data.data)
          }
        });
    }
}