<!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. 12、json、GridView、缓存

    1.解析json数据: public class PhotosData { public int retcode; public PhotosInfo data; public class Photo ...

  2. redis5.0新特性

    1. redis5.0新特性 1.1. 新的Stream类型 1.1.1. 什么是Stream数据类型 抽象数据日志 数据流 1.2. 新的Redis模块API:Timers and Cluster ...

  3. php--include 、require

    一.include .require 定义:包含并运行指定文件 问题:查询了这两个语言结构的资料,有人说,什么require  先执行,什么include后执行. 思考:我觉得官方文档已经解释的很清楚 ...

  4. 使用ajax的post方式下载excel

    项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token验证信息,参考了很多文章,最终实现如下: PHP后端使用base64: $filename = 'd ...

  5. 使用opencv库编译代码并运行

    安装Opencv之后,首先要写一份代码测试一下是否ok. 本文代码图像边沿检测的: #include <opencv2/highgui/highgui.hpp> #include < ...

  6. 【design patterns】设计模式

    1.单例设计模式(singleton) 用途举例:对于多个程序使用同一个配置信息对象时比如在连接数据库时使用单例模式,每次只取出一个连接 步骤:①私有化该类的构造函数 ②私有化一个静态的对象 ③公有化 ...

  7. .NET Core 如何调用 WebService

    0.使用背景 因为现在的项目都是基于 .NET Core 的,但是某些需要调用第三方的 WebService 服务,故有了此文章.其基本思路是通过微软提供的 Svcutil 工具生成代理类,然后通过 ...

  8. 微信小程序入门（四）

    16.WXSS特性之模板及引用 模板引用 index.wxml <template name="tempItem"> <view> <view> ...

  9. 解决ionic3 android 运行出现Application Error - The connection to the server was unsuccessful

    在真机上启动ionic3打包成的android APK,启动了很久结果弹出这个问题: Application Error - The connection to the server was unsu ...

  10. Redis（2）---数据持久化

    数据持久化 Redis有两种持久化的方式:快照(RDB文件)和追加式文件(AOF文件) (1)RDB持久化方式是在一个特定的间隔保存某个时间点的一个数据快照.(默认模式) (2)以日志的形式来记录每个 ...