原

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

5人阅读 2024/11/18 15:33 总访问：717321 评论：0 收藏：0 手机

分类: 前端

效果图：

<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>

```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 8篇

ORM 16篇

前端 64篇

随笔 14篇

移动开发 6篇

数据库 7篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

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

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}