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>
顯示效果:
