<script setup>
|
import { ref, reactive, watch, onMounted, nextTick } from "vue";
|
const props = defineProps({
|
data: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
defaultExpandKeys: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
currentNodeKey: {
|
type: [String, Number],
|
default: ""
|
},
|
});
|
|
const tree = ref(null);
|
const current = ref('');
|
const defaultProps = reactive({
|
children: 'children',
|
label: 'label',
|
isLeaf: 'isLeaf',
|
});
|
|
watch(
|
() => props.currentNodeKey,
|
(val) => {
|
nextTick(() => {
|
current.value = val;
|
tree.value.setCurrentKey(val);
|
});
|
}
|
);
|
|
const emit = defineEmits(['node-click', 'leaf-click']);
|
|
function nodeClick(data, node) {
|
node.isCurrent = node.isLeaf;
|
if (node.isLeaf && current.value != node.key) {
|
current.value = node.key;
|
emit('leaf-click', data, node);
|
} else {
|
emit('node-click', data, node);
|
}
|
tree.value.setCurrentKey(current.value);
|
}
|
|
function nodeExpand(data, node) {
|
node.isCurrent = node.isLeaf;
|
if (!node.isLeaf && current.value != node.key) {
|
emit('node-click', data, node);
|
}
|
}
|
|
function nodeCollapse(data, node) {
|
loopClose(node.childrenNodes);
|
}
|
|
function loopClose(childNodes) {
|
if(!childNodes || childNodes.length === 0) {
|
return;
|
}
|
childNodes.map(item=>{
|
item.expanded = false;
|
loopClose(item.childNodes);
|
});
|
}
|
|
|
onMounted(() => {
|
setTimeout(() => {
|
if(tree.value) {
|
tree.value.setCurrentKey(props.currentNodeKey);
|
current.value = props.currentNodeKey;
|
}
|
}, 500);
|
});
|
|
|
</script>
|
|
<template>
|
<el-tree
|
class="filter-tree"
|
:props="defaultProps"
|
:auto-expand-parent="true"
|
node-key="key"
|
ref="tree"
|
:data="data"
|
:default-expanded-keys="defaultExpandKeys"
|
:current-node-key="currentNodeKey"
|
@node-collapse="nodeCollapse"
|
@node-click="nodeClick"
|
@node-expand="nodeExpand"
|
>
|
<template #default="{ node }">
|
<span class="span-ellipsis">
|
<span :title="node.label">{{ node.label }}</span>
|
</span>
|
</template>
|
</el-tree>
|
</template>
|
|
<style scoped lang="less">
|
.filter-tree {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
</style>
|
