<template>
|
<div>
|
<div style="display: flex;margin-bottom: 8px;">
|
<el-input
|
style='flex: 1'
|
placeholder='搜索'
|
prefix-icon='el-icon-search'
|
v-model='searchValue'
|
clearable>
|
</el-input>
|
<div class='refresh-btn' v-if='treeList.length>0' @click='refshData'>
|
重置<i class='el-icon-refresh'></i>
|
</div>
|
</div>
|
|
<div class='tree-box'>
|
|
<el-tree
|
ref='tree'
|
:data='treeList'
|
node-key='id'
|
@node-expand='onExpand'
|
@node-click='onSelect'
|
:expand-on-click-node='false'
|
:default-expand-all='autoExpandParent'
|
:filter-node-method='filterNode'
|
:highlight-current='true'
|
>
|
<template slot-scope='{ node, data }'>
|
<span v-if='node.label.indexOf(searchValue) > -1' class='font-14 line-h-30'>
|
{{ node.label.substr(0, node.label.indexOf(searchValue)) }}
|
<span style='color: #0d997c' class='font-14 line-h-30'>{{ searchValue }}</span>
|
{{ node.label.substr(node.label.indexOf(searchValue) + searchValue.length) }}
|
</span>
|
<span v-else>{{ node.label }}</span>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
props: {// 第二种方式
|
treeList: {
|
type: Array,
|
default: function() {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {
|
expandedKeys: [],
|
searchValue: '',
|
autoExpandParent: false,
|
dataList: [],
|
};
|
},
|
watch: {
|
searchValue(val) {
|
this.$refs.tree.filter(val);
|
},
|
treeList(curVal) {
|
if (curVal) {
|
this.generateList(curVal);
|
this.treeList = curVal;
|
const rander = (array, param) => {
|
array.forEach(v => {
|
v.scopedSlots = param;
|
if (v.children && v.children.length > 0) {
|
rander(v.children, param);
|
}
|
});
|
};
|
rander(this.treeList, { label: 'label' });
|
}
|
},
|
},
|
methods: {
|
onExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys;
|
this.autoExpandParent = false;
|
},
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.label.indexOf(value) !== -1;
|
},
|
onChange(e) {
|
const value = e;
|
const expandedKeys = this.dataList.map(item => {
|
if (item.label.indexOf(value) > -1) {
|
return this.getParentKey(item.id, this.treeList);
|
}
|
return null;
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i);
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: value,
|
autoExpandParent: true,
|
});
|
},
|
getParentKey(id, tree) {
|
let parentKey;
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i];
|
if (node.children) {
|
if (node.children.some(item => item.id === id)) {
|
parentKey = node.id;
|
} else if (this.getParentKey(id, node.children)) {
|
parentKey = this.getParentKey(id, node.children);
|
}
|
}
|
}
|
return parentKey;
|
},
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i];
|
const id = node.id;
|
this.dataList.push({ id: id, label: node.label });
|
if (node.children) {
|
this.generateList(node.children);
|
}
|
}
|
},
|
onSelect(selectedNodes) {
|
const param = { id: selectedNodes.id, name: selectedNodes.label };
|
if (selectedNodes.code) {
|
param.code = selectedNodes.code;
|
}
|
this.$emit('setNode', param);
|
},
|
refshData() {
|
this.$refs.tree.setCheckedKeys([]);
|
this.$refs.tree.setCurrentKey(null);
|
this.$forceUpdate();
|
this.$emit('setNode', {});
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
/deep/ .el-tree-node__content {
|
font-size: 14px;
|
height: 40px;
|
line-height: 40px;
|
}
|
|
.font-14 {
|
font-size: 14px;
|
}
|
|
.tree-box {
|
position: relative;
|
max-height: calc(100vh - 306px);
|
overflow-y: scroll;
|
}
|
|
.tree-box::-webkit-scrollbar {
|
width: 5px;
|
}
|
|
.refresh-btn {
|
cursor: pointer;
|
font-size: 14px;
|
line-height: 32px;
|
color: #999;
|
margin-left: 10px;
|
}
|
|
.refresh-btn:hover {
|
color: #0c8aff;
|
}
|
</style>
|
