<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .el-tree{ position:absolute; cursor:default; background:#fff; color:#606266; z-index:100; border:1px solid #dcdfe6; border-radius:5px; width:100%; } /*elementUI vue tree 显示设置高度与滚动条*/ .ORGTree{ height:300px; overflow:auto; } </style> </head> <body> <div id="app"> <el-form ref="projectOrg" v-model="projectOrg" label-width="140px" size="mini"> <el-form-item ref="treeParent" label="维护机构" prop="projectOrg"> <el-input @click.native="projectOrgFun($event)" v-model="searchOrgId" placeholder="请输入维护机构" readonly></el-input> <el-tree class="ORGTree" v-show="ishowTree" show-checkbox lazy ref="tree" highlight-current @check-change="currentchange" :load="getOrgList" @node-click="handleNodeClick" :props="defaultProps"> </el-tree> </el-form-item> </el-form> </div> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function () { return { input: [], searchOrgId: '', //保存被选中的ID, 提交的时候按字符串提交: // var organCodesList=this.organCodes.join(","), // 后台解析的时候使用: //String[] organCodes=organCodesList.split(","); organCodes: [], ishowTree: false, defaultProps: { children: 'children', label: 'label', }, projectOrg: '', } }, //加载完成时调用 created: function () { }, //方法 methods: { //树型点击 currentchange(data, ischeck) { console.log(data); if (!ischeck) { var index = this.input.findIndex(d => d === data.label); this.input.splice(index, 1); this.organCodes.splice(index, 1); } else { this.input.push(data.label); this.organCodes.push(data.id); } console.log(this.organCodes); var that = this; that.$refs.tree.$el.onmouseleave = function () { that.ishowTree = false; } that.searchOrgId = this.input.toString(); }, projectOrgFun(e) { if(this.ishowTree){ this.ishowTree = false; }else{ this.ishowTree = true; } //第一种方式:点击其他区域, 消失树 document.onclick=function(){ that.ishowTree=false; } e.stopPropagation();//阻止冒泡 //离开区域的时候树消失 var that = this; that.$refs.tree.$el.onmouseleave = function () { that.ishowTree = false; } that.$refs.treeParent.$el.onmouseleave = function () { that.ishowTree = false; } }, projectOrgFalse(){ this.ishowTree = false; }, handleNodeClick(data) { console.log(data); }, getOrgList(node, resolve) { let that = this; console.log(node); //等于0表示根节点 if (node.level == 0) { //请求数据 // that.getFirstRootNodeData(resolve); //模拟数据 var FirstRootNodeData = [{ id: '1', label: "初始根节点01" }, { id: '2', label: "初始根节点02" }]; resolve(FirstRootNodeData); //直接返回 return; } else { //请求数据(传送要请求的根节点的id) console.log(node.data.id); // that.getLeafNodeData(node.data.id,resolve); //模拟数据 var LeafNodeData = [{ id: '1', label: "叶子节点01" }, { id: '2', label: "叶子节点02" }, { id: '2', label: "叶子节点02" }]; resolve(LeafNodeData); return; } } }, }) </script> </body> </html>
显示效果:
