elementUI vue tree input 懒加载 输入下拉树型示例
程序员文章站
2022-03-01 13:31:32
elementUI vue tree input 懒加载 输入下拉树型示例 ......
<!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%; } </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" v-model="searchorgid" placeholder="请输入维护机构" readonly></el-input> <el-tree 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() { if(this.ishowtree){ this.ishowtree = false; }else{ this.ishowtree = true; } 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>
显示效果: