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

电脑版发表于：2024/11/18 15:33

效果图：

<img src="https://img.tnblog.net/arcimg/notebook/ec22c7bb70624f6795f6cfc79a99b978.png" style="width:299px;height:auto;">



代码如下：
```
<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>

```

TeachingNote

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

{{item.title}}