<!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. 一个简单的实例演示vuex模块化和命名空间

    因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...

  2. Ansible工具原理一

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量运行命 ...

  3. python高级-深浅拷贝(16)

    一.浅拷贝 浅拷贝是对一个对象的顶层拷贝,通俗地讲就是:拷贝了引用,并没有拷贝内容. a = [1,2,3] print(id(a)) b=a print(b) print(id(b)) a.appe ...

  4. 设置python环境变量

    原始环境变量 /> python Python |Anaconda (-bit)| (default, May , ::) [GCC (Red Hat -)] on linux Type &qu ...

  5. yolov3中 预测的bbox如何从特征图映射到原图？

    Anchor Box的边框 选取标准的k-means(欧式距离来衡量差异),在box的尺寸比较大的时候其误差也更大,而我们希望的是误差和box的尺寸没有太大关系.所以通过IOU定义了如下的距离函数,使 ...

  6. 从非标准的POST数据流中提取文件

    1 接收数据流转成字符串,注意编码 byte[] recv= Request.BinaryRead(Request.TotalBytes);string sourceByte = Encoding.U ...

  7. 浅谈模块系统与 ABP 框架初始化

    在 ABP 框架当中所有库以及项目都是以模块的形式存在,所有模块都是继承自AbpModule 这个抽象基类,每个模块都拥有四个生命周期.分别是: PreInitialze(); Initialize( ...

  8. 全网最详细的Windows里Anaconda-Navigator启动后闪退的解决方案（图文详解）

    不多说,直接上干货!  问题详情 点击 出现Anaconda-Navigator启动后闪退的现象. 或者 装过一次anaconda,貌似按了一个更新的键就打不开了.navigator这个打不开,会停留 ...

  9. jsp fmt页面显示value does not support runtime expressions

    最近使用Struts2+Spring3+Mybatis3做一个项目,在用户修改页面显示生日, <fmt:formatDate value="${user.birthday}" ...

  10. .Net和C#介绍

    一.前言 本文主要针对刚入门以及还需要对基础进行恶补一下的兄弟进行基础介绍,并尽可能的做到客观,如有错误也虚心接受高手门的纠正. 二..Net平台简介 .net即DotNet,首先我先给出微软的定义: ...