elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div
<!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的更多相关文章
- 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- ElementUI Tree控件在懒加载模式下的重新加载和模糊查询
之所以使用懒加载是为了提高性能,而且只有在懒加载模式下默认会给所有显示节点设置展开按钮.leaf也可以做到,但是要操作数据比较麻烦. 要实现懒加载模式下的模糊查询以及重新加载必须要使用data与laz ...
- Vue代码分割懒加载的实现方法
什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...
- vue.js移动端app实战4：上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- vue项目中上拉加载和下拉刷新页面的实现
功能:上拉加载,下拉刷新 使用方法: 自己创建一个.vue的文件(我自己是创建了一个PullToRefresh.vue的文件),将代码粘贴进去,具体的样式问题自己在该文件中调整. <templa ...
- Vue-上拉加载与下拉刷新（mint-ui：loadmore）一个页面使用多个上拉加载后冲突问题
所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...
- UITableView与UISearchController搜索及上拉加载，下拉刷新
#import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...
随机推荐
- java小白之面向对象
面向对象 面相对象(oop)和面向过程(pop)通常一起说,一个是更加关注过程,事力亲为,而面向对象更加注重结果,所以说,面向对象更加是一种思想,它贯穿整个java,以上帝视角来看整个功能需求,简化开 ...
- Oracle实战笔记（第一天）
导读 笔记内容来自韩顺平老师的视频<玩转Oracle实战教程>,可以结合笔记进行观看.第一天视频中还有Oracle的介绍和安装等内容,很容易搜索到,这里就不再进行总结. 目录 1.命令行工 ...
- LabVIEW（四）：数据存储和文件IO
1.使用NI数据采集板卡来进行数据保存和文件I/O操作.2.在一个典型的测试测量系统当中,包括:信号调理.信号采集.信号分析.信号显示.数据存储.数据存储:将采集到的数据储存到磁盘上,以备日后离线分析 ...
- oracle select in超过1000条报错解决方法
本博客介绍oracle select in超过1000条数据的解决方法,java框架是采用mybatis的,这可以说是一种比较常见的错误:select * from A where id in(... ...
- 如何实现一个基于 jupyter 的 microservices
零.背景: 现有基于 Node.js 的项目,但需要整合 Data Science 同事的基于 python(jupyter) 的代码部分,以实现额外的数据分析功能.于是设想实现一个 microser ...
- RIPng配置（第十三组）
拓扑如下 配置rip指令和ipv6包允许路由指令以r1为例 在r1上配置拓扑上对应网段的ip,r1上两个连接路由器的端口手动设置ip,同网段的路由器端口ip自动获取. r2配置 r3 配置完后查看路由 ...
- 深入理解Java Stream流水线
前面我们已经学会如何使用Stream API,用起来真的很爽,但简洁的方法下面似乎隐藏着无尽的秘密,如此强大的API是如何实现的呢?Pipeline是怎么执行的,每次方法调用都会导致一次迭代吗?自动并 ...
- sql server 锁与事务拨云见日(下)
在锁与事务系列里已经写完了上篇中篇,这次写完下篇.这个系列俺自认为是有条不紊的进行,但感觉锁与事务还是有多很细节没有讲到,温故而知新可以为师矣,也算是一次自我提高总结吧,也谢谢大伙的支持.在上一篇的末 ...
- Netdata 服务器前端监控平台
Netdata 是一款 Linux 性能实时监测工具.Netdata是Linux系统实时性能监测工具,提供web界面的界面视角. 它用可视化的手段,将被监测者最细微的细节,展现了出来.这样,你便可以清 ...
- 【Android基础】利用Intent在Activity之间传递数据
前言: 上一篇文章给大家聊了Intent的用法,如何用Intent启动Activity和隐式Intent,这一篇文章给大家聊聊如何利用Intent在Activity之间进行沟通. 从一个Activ ...