106 lines
2.0 KiB
Vue
106 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<div v-clickoutside="closeTree">
|
|
<div @click="inputFocus">
|
|
<el-input
|
|
v-model="inputValue"
|
|
:style="'width:' + width + 'px'"
|
|
placeholder="请选择工机具类型"
|
|
></el-input>
|
|
</div>
|
|
<div class="treeModule">
|
|
<el-tree
|
|
class="ORGTree"
|
|
v-show="ishowTree"
|
|
ref="tree"
|
|
:data="dataList"
|
|
key="id"
|
|
node-key="id"
|
|
highlight-current
|
|
@node-click="handleNodeClick"
|
|
:props="defaultProps"
|
|
>
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Clickoutside from "element-ui/src/utils/clickoutside";
|
|
export default {
|
|
directives: { Clickoutside },
|
|
props: {
|
|
dataList: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
// name: {
|
|
// type: String,
|
|
// default: ''
|
|
// },
|
|
width: {
|
|
type: Number,
|
|
default: 300
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
mineStatusValue: [],
|
|
inputValue: '',
|
|
dataLists: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label',
|
|
},
|
|
ishowTree: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
// watch: {
|
|
// name: function () {
|
|
// this.inputValue = this.name
|
|
// }
|
|
// },
|
|
methods: {
|
|
inputFocus() {
|
|
if (this.ishowTree == true) {
|
|
this.ishowTree = false
|
|
} else {
|
|
this.ishowTree = true
|
|
}
|
|
|
|
},
|
|
// 关闭树形控件
|
|
closeTree() {
|
|
this.ishowTree = false
|
|
},
|
|
handleNodeClick(e) {
|
|
this.inputValue = e.label
|
|
this.$emit('changeId', e.id)
|
|
this.ishowTree = false
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.treeModule {
|
|
position: absolute; /*这里一定要设置*/
|
|
z-index: 999999; /*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/
|
|
}
|
|
.ORGTree {
|
|
width: 240px;
|
|
height: 200px;
|
|
overflow: auto;
|
|
border: 1px solid #ccc7c7;
|
|
}
|
|
</style>
|