<template>
|
<div id="tree-container" class="clearfix" style="padding: 8px">
|
<div class="flex-row-left mb-2" v-if="isSearch">
|
<b-input
|
autocomplete="off"
|
v-model="searchValue"
|
placeholder="输入关键字"
|
@change.native="handleSearch"
|
class="mr10"
|
/>
|
<b-button variant="primary" class="pl30 pr30" size="md" @click="handleSearch">搜索</b-button>
|
</div>
|
|
<!-- style="background: rgb(243, 243, 243)" -->
|
<div class="overflow-auto">
|
<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%"
|
:show-checkbox="checkbox"
|
@check="handleCheckChange"
|
/>
|
</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
|
},
|
checkbox: {
|
default: false,
|
type: Boolean
|
},
|
isSearch: {
|
default: true,
|
type: Boolean
|
}
|
},
|
methods: {
|
// * 获取组织树
|
getOrgDevice(data) {
|
return new Promise((resolve, reject) => {
|
if (!data) {
|
reject(new Error('递归函数传入参数存在问题！！！'))
|
}
|
const list = []
|
const _recursionFn = data => {
|
for (let item of data) {
|
if (item.type !== 'MENU') {
|
// resolve(item)
|
let listKey = list.map(iteam => iteam.id)
|
if (!listKey.includes(item.id)) {
|
list.push(item)
|
}
|
} else if (item.child) {
|
_recursionFn(item.child)
|
}
|
}
|
}
|
_recursionFn(data)
|
resolve(list)
|
})
|
},
|
handleNodeClick(node) {
|
this.$emit('currentNode', node)
|
},
|
async handleCheckChange(
|
node,
|
{ checkedKeys, checkedNodes, halfCheckedKeys, halfCheckedNodes }
|
) {
|
console.log(
|
node,
|
checkedKeys,
|
checkedNodes,
|
halfCheckedKeys,
|
halfCheckedNodes,
|
'node, checkedKeys, checkedNodes, halfCheckedKeys, halfCheckedNodes'
|
)
|
// let checkNodes = this.getCheckedNodes()
|
const checkNodes = await this.getOrgDevice(checkedNodes)
|
this.$emit('checkNode', { node, checkedKeys, checkNodes })
|
},
|
// * 设置选中状态
|
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()
|
},
|
getCheckedNodes() {
|
return this.$refs.tree2.getCheckedNodes()
|
}
|
},
|
components: {
|
Tree
|
}
|
}
|
</script>
|
|
<style lang="scss" socped>
|
#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>
|
