<template>
|
<div id="tree-container" class="clearfix" style="padding: 8px">
|
<div class="flex-row-left mb-2">
|
<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%"
|
/>-->
|
<Tree
|
id="tree"
|
ref="tree2"
|
node-key="id"
|
class="float-left"
|
style="width: 100%"
|
:data="data"
|
:props="option"
|
:expand-on-click-node="false"
|
:show-checkbox="showCheckbox"
|
:highlight-current="highlightCurrent"
|
:default-expand-all="isOpenAll"
|
@node-click="handleNodeClick"
|
@check-change="handleCheckChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Tree } from 'element-ui'
|
export default {
|
data: () => ({
|
searchValue: '',
|
checkedList: []
|
}),
|
props: {
|
data: {
|
type: Array,
|
default: () => [],
|
required: true
|
},
|
option: {
|
type: Object,
|
default: () => ({
|
children: 'child',
|
label: 'name'
|
})
|
},
|
isOpenAll: {
|
default: true,
|
type: Boolean
|
},
|
isDataBase: {
|
default: false,
|
type: Boolean
|
},
|
highlightCurrent: { default: true, type: Boolean },
|
showCheckbox: { default: false, type: Boolean }
|
},
|
computed: {
|
checkedIds() {
|
return this.checkedList.map(item => item.id)
|
}
|
},
|
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()
|
},
|
/* 勾选选框 */
|
handleCheckChange(data, checked, indeterminate) {
|
// 获得在当前数组中的index
|
let dataIndex = null
|
for (let [index, item] of this.checkedList.entries()) {
|
if (data && item.id === data.id) {
|
dataIndex = index
|
break
|
}
|
}
|
if (checked) {
|
// 添加
|
this.checkedList.push(data)
|
} else if (!indeterminate && dataIndex !== null) {
|
// 删除
|
this.checkedList.splice(dataIndex, 1)
|
}
|
|
this.$emit('check-change', {
|
list: this.checkedList,
|
ids: this.checkedIds
|
})
|
}
|
},
|
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>
|
