<!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. Spring boot 内置tomcat禁止不安全HTTP方法

    Spring boot 内置tomcat禁止不安全HTTP方法 在tomcat的web.xml中可以配置如下内容,让tomcat禁止不安全的HTTP方法 <security-constraint ...

  2. Kali学习笔记10：端口扫描详解（下）

    上一篇先是介绍了UDP的端口扫描,又谈了TCP的不完全连接端口扫描 https://www.cnblogs.com/xuyiqing/p/9389276.html 接下来我们看看TCP的全连接端口扫描 ...

  3. 深入理解java反射原理

    反射是java的一个特性,这一特性也使得它给了广大的第三方框架和开发过者很大的想像空间. 通过反射,java可以动态的加载未知的外部配置对象,临时生成字节码进行加载使用,从而使代码更灵活!可以极大地提 ...

  4. 一、activiti工作流(workflow)入门介绍

    activiti官方网站(官网通常很卡,不建议看,直接看我教程就行) http://www.activiti.org/ eclipse离线安装activiti插件并下载教程 https://downl ...

  5. Java-redis-雪崩优化

    缓存失效的时候如下图: 解决办法"使用互斥锁(mutex key):下面是核心伪代码 v = memcache.get(key); if (v == null) { if (memcache ...

  6. MySQL：刷脏页

    1. 脏页,干净页 当内存数据页和磁盘数据页上的内容不一致时,我们称这个内存页为脏页: 内存数据写入磁盘后,内存页上的数据和磁盘页上的数据就一致了,我们称这个内存页为干净页. 2. 刷脏页的时机 2. ...

  7. 安卓TabLayout+ViewPager实现切页

    安卓使用TabLayout+ViewPager+Fragment 实现页面切换,可实现左右滑动切换视图界面和点击切换 可自定义菜单栏是在顶部还是在底部 一.实现效果: 二.实现过程: 2.1 一些重要 ...

  8. JAVA面试题-数组字符串基础

    1.大写的Integer和String是可变类还是不可变类?怎么定义不可变类?不可变.用final关键字,如public final class Integer extends Number 2.比较 ...

  9. 关于 Spring Security OAuth2 中 Feign 调用 Token 问题

    微服务体系中,避免不了服务之间链式调用,一般使用 Feign ,由于使用 Spring Security OAuth2 全局做了安全认证,简单的一种实现方式就是在服务提供方获得 Token 再次通过 ...

  10. Hadoop学习笔记（五）：java开发MapReduce

    1. MapReduce的流程图(摘自马士兵老师视频),我们开发的就是其中的这两个(红框)过程.简述一下这个图,input就是我们需要处理的文件(datanode上文件的一个分块):Split就是将这 ...