element plus tree 把数据源里边的所有isShowMenu都赋值为false，在树节点右边增加操作按钮，只显示当前点击节点的菜单

效果图：

代码如下：

<template>
    <div class="module-manage-container">
        <div style="display: flex">
            <el-card class="box-card" style="width: 300px; margin-right: 10px">
                <el-scrollbar :style="{ height: state.contentHeight }">
                    <el-tree ref="tree" :data="state.treeData" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
                        <template #default="{ node, data }">
                            <span class="custom-tree-node" v-if="data.isShowMenu">
                                <span>{{ node.label }}</span>
                                <span>
                                    <el-icon style="color: rgb(70, 166, 255); padding-top: 6px" @click="append(data)"><Plus /></el-icon>
                                </span>
                            </span>
                        </template>
                    </el-tree>
                </el-scrollbar>
            </el-card>
            <el-card class="box-card" style="flex: 1">
                <div class="clearfix">
                    <div style="flex: 1" />
                    <el-input placeholder="请输入档案" size="default" />
                    <el-button type="primary" size="default">搜索</el-button>
                </div>
                <div>其他内容...</div>
            </el-card>
        </div>
    </div>
</template>
<script setup lang="ts" name="moduleManageContainer">
import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
import request from '/@/utils/requestTools';
import { Search, Plus, Edit } from '@element-plus/icons-vue';
const state = reactive({
    title: '更新',
    contentHeight: '150px',
    treeData: [
        {
            label: '人事档案',
            isShowMenu: true,
            children: [
                {
                    label: '初始档案',
                    children: [
                        {
                            label: '2019',
                        },
                        {
                            label: '2020',
                        },
                        {
                            label: '2021',
                        },
                    ],
                },
                {
                    label: '简化档案',
                    children: [
                        {
                            label: '简化一版',
                        },
                        {
                            label: '简化二版',
                        },
                        {
                            label: '简化三版',
                        },
                    ],
                },
            ],
        },
        {
            label: '合同档案',
            children: [
                {
                    label: '二级 2-1',
                    children: [
                        {
                            label: '三级 2-1-1',
                        },
                    ],
                },
                {
                    label: '二级 2-2',
                    children: [
                        {
                            label: '三级 2-2-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '会计档案',
            children: [
                {
                    label: '二级 3-1',
                    children: [
                        {
                            label: '三级 3-1-1',
                        },
                    ],
                },
                {
                    label: '二级 3-2',
                    children: [
                        {
                            label: '三级 3-2-1',
                        },
                    ],
                },
            ],
        },
    ],
});
onMounted(() => {
    autoHeight();
    window.addEventListener('resize', autoHeight);
});
const append = (data: any) => {
    console.log('看看信息', data);
};
const handleNodeClick = (data: any) => {
    // 先把数据源里边的所有isShowMenu都赋值为false
    resetIsShowMenu()
    // 在把当前点击的节点的isShowMenu设置为true
    if (data) {
        data.isShowMenu = true;
    }
};
// 递归算法把数据源里边的所有isShowMenu都赋值为false
const resetIsShowMenu = () => {
    const traverseNodes = (nodes:any) => {
        nodes.forEach((node:any) => {
            node.isShowMenu = false;
            if (node.children) {
                traverseNodes(node.children);
            }
        });
    };
    traverseNodes(state.treeData);
};
const autoHeight = () => {
    state.contentHeight = window.innerHeight - 238 + 'px';
};
</script>
<style scoped="scoped" lang="scss">
.course-module-settings-container {
    .el-input {
        width: 200px;
        margin-right: 10px;
    }
    .clearfix {
        display: flex;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
}
</style>