<!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>
显示效果:
