admin-govern/src/components/tree/index.vue

<template>
    <div  :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden;'>
        <Icon
            v-show='menuCollapse'
            @click='onMenuCollapse'
            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
            :class="menuCollapse ? 'unfold' : ''"
            size='18'
            class='fold ml10 mt20 menu-collapse'
            style='cursor: pointer'
        />
        <div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
            <div style='display: flex; align-items: center' class='mb10'>
                <el-input v-model='filterText' placeholder='请输入内容' clearable>
                    <template #prefix>
                        <Icon name='el-icon-Search' style='font-size: 16px' />
                    </template>
                </el-input>
                <Icon
                    @click='onMenuCollapse'
                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                    :class="menuCollapse ? 'unfold' : ''"
                    size='18'
                    class='fold ml10 menu-collapse'
                    style='cursor: pointer'
                    v-if='props.canExpand'
                />
            </div>
            <el-tree
                style='flex: 1; overflow: auto;'
                ref='treeRef'
                :props='defaultProps'
                highlight-current
               @check-change="checkTreeNodeChange"
                :filter-node-method='filterNode'
                node-key='id'
                v-bind='$attrs'
            >
                <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>
    </div>
</template>

<script lang='ts' setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { emit } from 'process';
import { ref, watch } from 'vue'

defineOptions({
    name: 'govern/tree'
})

interface Props {
    width?: string
    canExpand?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    width: '280px',
    canExpand: true
})
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const filterText = ref('')
const defaultProps = {
    label: 'name',
    value: 'id'
}
const emit = defineEmits(['checkTreeNodeChange'])
watch(filterText, val => {
    treeRef.value!.filter(val)
})
const onMenuCollapse = () => {
    menuCollapse.value = !menuCollapse.value
    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const filterNode = (value: string, data: any) => {
    if (!value) return true
    return data.name.includes(value)
}
const checkTreeNodeChange=()=>{
   console.log( treeRef.value?.getCheckedNodes(),"ikkkkkiisiiisis");
   emit('checkTreeNodeChange',treeRef.value?.getCheckedNodes())
}
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: 100%;

    :deep(.el-tree) {
        border: 1px solid var(--el-border-color);
    }

    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
        background-color: var(--el-color-primary-light-7);
    }

    .menu-collapse {
        color: var(--el-color-primary);
    }
}

.custom-tree-node {
    display: flex;
    align-items: center;
}
</style>