<template>
|
<div class="leftTreee">
|
<div class="treeSearch">
|
<el-input v-model="filterText" class="w-50 m-2" placeholder="Type something">
|
<template #prefix>
|
<el-icon class="el-input__icon">
|
<search />
|
</el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="treeBox">
|
<div class="elTree">
|
<el-tree ref="treeRef" :data="treeVal" :filter-node-method="filterNode" :props="defaultProps"
|
@node-click="handleNodeClick" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted, watch } from 'vue';
|
import { Search } from '@element-plus/icons-vue'
|
import { ElTree } from 'element-plus'
|
const showLine = ref(false);
|
const treeVal = ref([]);
|
|
const defaultProps = {
|
children: 'children',
|
label: 'title',
|
}
|
|
const setLayerTreeStart = () => {
|
treeVal.value = treeData;
|
|
}
|
const filterText = ref('')
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
|
const handleNodeClick = () => {
|
|
}
|
const filterNode = (value: string, data: Tree) => {
|
if (!value) return true
|
|
return data.title.includes(value)
|
}
|
|
onMounted(() => {
|
setLayerTreeStart();
|
})
|
watch(filterText, (val) => {
|
if(!val){
|
|
}
|
treeRef.value.filter(val)
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
.leftTreee {
|
height: 100%;
|
width: 20%;
|
background: #dfdfdf;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
|
.treeSearch {
|
padding: 5px;
|
}
|
|
.treeBox {
|
flex: 1;
|
position: relative;
|
padding: 5px;
|
|
.elTree {
|
position: absolute;
|
height: calc(100% - 10px);
|
width: calc(100% - 10px);
|
overflow: auto;
|
}
|
|
.elTree::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
.elTree::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
|
.elTree::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0.1);
|
}
|
|
|
}
|
}
|
</style>
|
|
