admin-govern/src/components/tree/index.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;overflow: auto;"
            ref="treeRef"
            :props="defaultProps"
            v-bind="$attrs"
            highlight-current
            default-expand-all
            :filter-node-method="filterNode"
            node-key="id"
        >
            <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 { ElTree } from 'element-plus';
import { ref, watch } from 'vue'

defineOptions({
    name: 'govern/tree'
})
const filterText = 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)
}
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })
</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>