<template>
|
<div
|
id="tree-container"
|
class="clearfix"
|
style="padding: 8px;"
|
>
|
<div class="d-flex pb10">
|
<b-input
|
autocomplete="off"
|
v-model="searchValue"
|
placeholder="输入关键字"
|
@change.native="handleSearch"
|
class="mr10"
|
/>
|
<b-button variant="primary" class="pl-4 pr-4" @click="handleSearch">搜索</b-button>
|
<b-button variant="link" class="tree-btn" @click="$emit('toggleOpen')">
|
<i class="ion ion-md-swap f20"></i>
|
</b-button>
|
|
</div>
|
<hr class="m-0" />
|
<!-- style="background: rgb(243, 243, 243)" -->
|
<div class="overflow-auto py-2 px-2 bg-white" style="height:82vh">
|
<Tree
|
:data="data"
|
:props="option"
|
:default-expand-all="isOpenAll"
|
@node-click="handleNodeClick"
|
highlight-current
|
id="tree"
|
ref="tree2"
|
node-key="id"
|
:filter-node-method="filterNode"
|
class="float-left"
|
style="width: 100%"
|
/>
|
</div>
|
|
<div v-if="!data.length">暂无数据</div>
|
</div>
|
</template>
|
|
<script>
|
import { Tree } from 'element-ui'
|
export default {
|
data: () => ({
|
searchValue: ''
|
}),
|
props: {
|
data: {
|
type: Array,
|
default: () => [],
|
required: true
|
},
|
option: {
|
type: Object,
|
default: () => ({
|
children: 'child',
|
label: 'name'
|
})
|
},
|
isOpenAll: {
|
default: true,
|
type: Boolean
|
}
|
},
|
methods: {
|
handleNodeClick(node) {
|
this.$emit('currentNode', node)
|
},
|
// * 设置选中状态
|
setCurrentKey(id) {
|
this.$nextTick(() => {
|
this.$refs.tree2.setCurrentKey(id)
|
})
|
},
|
// 清空选中状态
|
removeCurrentNode() {
|
this.$refs.tree2.setCurrentKey(null)
|
},
|
// * 过滤
|
handleSearch() {
|
this.$refs.tree2.filter(this.searchValue)
|
},
|
// * 过滤
|
filterNode(value, data) {
|
if (!value) return true
|
return data.name.indexOf(value) !== -1
|
},
|
// * 获取被选中节点
|
getCurrentNode() {
|
return this.$refs.tree2.getCurrentNode()
|
}
|
},
|
components: {
|
Tree
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
#tree-container .el-tree {
|
overflow: auto;
|
}
|
|
#tree-container .el-tree-node > .el-tree-node__children {
|
overflow: visible;
|
}
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
// background: rgb(38, 180, 255);
|
// color: #fff;
|
color: #35bde7;
|
position: relative;
|
border-radius: 5px;
|
overflow: hidden;
|
.el-tree-node__expand-icon {
|
color: #35bde7;
|
}
|
}
|
.el-tree-node__content:hover {
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.tree-btn{
|
padding:6px 8px;
|
}
|
/* .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:after{
|
content:'';
|
display: block;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
right: 100%;
|
background: rgb(38, 180, 255);
|
}
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label{
|
position: relative;
|
z-index: 9;
|
} */
|
</style>
|
