68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="cn-tree">
|
||
|
|
<el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
|
||
|
|
<template #prefix>
|
||
|
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||
|
|
</template>
|
||
|
|
</el-input>
|
||
|
|
<el-tree
|
||
|
|
style="flex: 1"
|
||
|
|
ref="treeRef"
|
||
|
|
:props="defaultProps"
|
||
|
|
v-bind="$attrs"
|
||
|
|
highlight-current
|
||
|
|
default-expand-all
|
||
|
|
:filter-node-method="filterNode"
|
||
|
|
>
|
||
|
|
<template #default="{ node, data }">
|
||
|
|
<span class="custom-tree-node">
|
||
|
|
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" />
|
||
|
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-tree>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, watch } from 'vue'
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'govern/tree'
|
||
|
|
})
|
||
|
|
const filterText = ref('')
|
||
|
|
const treeRef = ref()
|
||
|
|
const defaultProps = {
|
||
|
|
label: 'name',
|
||
|
|
value: 'id'
|
||
|
|
}
|
||
|
|
watch(filterText, val => {
|
||
|
|
treeRef.value!.filter(val)
|
||
|
|
})
|
||
|
|
const filterNode = (value: string, data: any) => {
|
||
|
|
if (!value) return true
|
||
|
|
return data.name.includes(value)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.cn-tree {
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px;
|
||
|
|
height: 100%;
|
||
|
|
width: 280px;
|
||
|
|
:deep(.el-tree) {
|
||
|
|
background: #efeff0;
|
||
|
|
}
|
||
|
|
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||
|
|
background-color: var(--el-color-primary-light-7);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.custom-tree-node {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|