<!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. python写的压缩软件

    import tkinterimport tkinter.filedialogimport osimport zipfileimport tkinter.messagebox #创建住窗口root = ...

  2. 《Java 多线程编程核心技术》- 笔记

    作为业务开发人员,能够在工作中用到的技术其实不多.虽然平时老是说什么,多线程,并发,注入,攻击!但是在实际工作中,这些东西不见得用得上.因为,我们用的框架已经把这些事做掉了. 比如web开发,外面有大 ...

  3. C#连接mysql数据库的一个例子和获取本机IP的方法

    本例子是一个最初级直接连接mysql数据库的例子,实现了往数据库插入数据的操作: string MyConnectionMysql="Server=localhost;Datbase=xxx ...

  4. python基础-列表(7)

    一.列表格式 列表名 = [列表元素1,列表元素2,列表元素3,… ] 说明: 列表元素之间是有顺序的,也是通过下标表示,第一个元素的小标为0. 列表元素可以不是同种类型,任何类型都行 列表通常当做容 ...

  5. Linux编程 20 shell编程(shell脚本创建，echo显示信息)

    一概述 前面19章里已经掌握了linux系统和命令行的基础知识,从本章开始继续学习shell脚本的基础知识.在大量编辑shell脚本前,先来学习下一些基本概念. 1.1    使用多个命令 Shell ...

  6. intellij idea maven project 无法显示dependencies

    Intellj 自动载入Mave依赖是一个很人性化的功能,但不排除有时候会碰到问题,导致pom文件修改却没有触发自动重新载入的动作或者加载中途出现弱网的情况中断载入的,此时需要手动强制更新依赖. 如下 ...

  7. Java 锁优化

    一.重量级锁   Java中,Synchronized是通过对象内部的一个叫做监视器锁(monitor)来实现的.但是监视器锁本质又是依赖于底层的操作系统的Mutex Lock来实现的.而操作系统实现 ...

  8. Go随机数

    Go math/rand包用于生成随机数. 代码: package main import "fmt" import "math/rand" func main ...

  9. noteless的博客导航页 所有文章的导航页面

    导航  <spring springmvc mybatis maven 项目整合示例系列-导航页> <JAVA 基础知识点拾遗系列 JAVA学习 -1层  导航页> <计 ...

  10. Perl回调函数和闭包

    在Perl中,子程序的引用常用来做回调函数(callback).闭包(closure),特别是匿名子程序. 回调函数(callback) 关于什么是回调函数,见一文搞懂:词法作用域.动态作用域.回调函 ...