<template>
|
<div id="tree-container" class="clearfix" style="padding: 8px;">
|
<div v-if="isSearch">
|
<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">
|
</div>
|
<div class="overflow-auto pb-2 px-2" v-show="isOpen" style="height:39vh">
|
<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%"
|
:expand-on-click-node="false"
|
:render-content="renderContent"
|
/>
|
</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
|
},
|
isSearch: {
|
default: true,
|
type: Boolean
|
},
|
isOpen: {
|
default: false,
|
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()
|
},
|
clearTree() {
|
this.$emit('currentNode', { id: '0', type: '1', name: '集群设备' })
|
this.removeCurrentNode()
|
},
|
renderContent(h, { node, data, store }) {
|
if (data.type === '4') {
|
return (
|
<span class="custom-tree-node">
|
{data.isOnMap === 1 ? (
|
<span class="text-primary">{data.name}</span>
|
) : (
|
<span class="text-purple">{data.name}</span>
|
)}
|
</span>
|
)
|
} else {
|
return <span>{node.label}</span>
|
}
|
}
|
},
|
components: {
|
Tree
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#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__expand-icon.is-leaf {
|
color: transparent;
|
cursor: default;
|
}
|
}
|
.el-tree-node__content:hover {
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.tree-btn {
|
padding: 6px 8px;
|
}
|
</style>
|
