<!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>

显示效果:

elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div的更多相关文章

  1. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  2. ElementUI Tree控件在懒加载模式下的重新加载和模糊查询

    之所以使用懒加载是为了提高性能,而且只有在懒加载模式下默认会给所有显示节点设置展开按钮.leaf也可以做到,但是要操作数据比较麻烦. 要实现懒加载模式下的模糊查询以及重新加载必须要使用data与laz ...

  3. Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...

  4. vue.js移动端app实战4：上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  5. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  6. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...

  7. vue项目中上拉加载和下拉刷新页面的实现

    功能:上拉加载,下拉刷新 使用方法: 自己创建一个.vue的文件(我自己是创建了一个PullToRefresh.vue的文件),将代码粘贴进去,具体的样式问题自己在该文件中调整. <templa ...

  8. Vue-上拉加载与下拉刷新（mint-ui：loadmore）一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...

  9. UITableView与UISearchController搜索及上拉加载，下拉刷新

    #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...

随机推荐

  1. JVM内存分配和垃圾收集策略

    java内存区域 程序计数器 因为java可以多线程并发执行,因此,为了线程切换后能恢复到正确的执行位置,每个线程都需要一个独立的程序计数器.记录正在执行的虚拟机字节码指令的地址. 这个区域不会产生内 ...

  2. 2个简单实例让你快速理解try-catch的用法

    相信在实际项目中,你可能经常会看到类似下面的代码 try { // 尝试执行代码块 } catch(err) { // 捕获错误的代码块 } finally { // 结果如何都会执行的代码块 } 简 ...

  3. 浅谈 Nginx 的内部核心架构设计

    一.前言 Nginx---Ngine X,是一款免费的.自由的.开源的.高性能HTTP服务器和反向代理服务器:也是一个IMAP.POP3.SMTP代理服务器:Nginx以其高性能.稳定性.丰富的功能. ...

  4. [原创]CobaltStrike & Metasploit Shellcode一键免杀工具

    CobaltStrike & Metasploit  Shellcode一键免杀工具 作者: K8哥哥 图片 1个月前该工具生成的exe免杀所有杀软,现在未测应该还能过90%的杀软吧. 可选. ...

  5. [django]date类型和datetime类型过滤

    搞清楚datetime.datetime和datetime.date模块 他们两个的格式区别 datetime模块 In [1]: from datetime import datetime In [ ...

  6. 如何在 Linux 中查看可用的网络接口

    在我们安装完一个 Linux 系统后最为常见的任务便是网络配置了.当然,你可以在安装系统时进行网络接口的配置.但是,对于某些人来说,他们更偏爱在安装完系统后再进行网络的配置或者更改现存的设置.众所周知 ...

  7. Zookeeper-watcher机制源码分析（一）

    Watcher的基本流程 ZooKeeper 的 Watcher 机制,总的来说可以分为三个过程:客户端注册 Watcher.服务器处理 Watcher 和客户端回调 Watcher 客户端注册wat ...

  8. Python编程Day4——if判断、while循环、for循环

    一.if判断 语法一: if条件: 代码块1 代码块2 代码块3 示例: sex='female' age=18 is_beautiful=True if sex =='female'and age& ...

  9. 一个系统部署多个tomcat实例

    一.添加环境到/etc/profile. JAVA_HOME=/usr/java/jdk1.8.0_111 PATH=$JAVA_HOME/bin:$PATH CLASSPATH=.:$JAVA_HO ...

  10. Kubernetes 基于 Metrics Server 与 HPA 的使用

    在 Kubernetes 中可以手动通过 kubectl scale 命令或通过修改 replicas 数量,可以实现 Pod 的扩容或缩容.Kubernetes 中还提供了 HPA(Horizont ...