Vue-3-中搭建菜单权限配置界面的详细指南
Vue 3 中搭建菜单权限配置界面的详细指南
在现代 Web 应用开发中，菜单权限配置是一个至关重要的功能，它确保不同角色的用户能够访问特定的功能模块。Vue 3 作为一款流行的 JavaScript 框架，为我们提供了高效且灵活的方式来构建这样的界面。本文将通过实际代码示例，详细讲解如何在 Vue 3 中搭建一个菜单权限配置界面。
一、界面基础结构搭建
我们使用 Element Plus 库来构建用户界面。在部分，我们创建了一个el-dialog组件，作为菜单权限配置的弹窗。
<el-dialog
title="菜单权限"
width="1000"
center
destroy-on-close
@open="dialogOpen"
>
<div>
<div>角色名称：jiaberr</div>
<div>
<text>菜单权限：</text>
<el-checkbox v-model="expandAll" @change="handleExpandAllChange">
展开/折叠
</el-checkbox>
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">
全选/全不选
</el-checkbox>
<el-checkbox v-model="checkStrictly"> 父子联动 </el-checkbox>
</div>
<div class="w-p-100 containner">
<el-tree
ref="treeRef"
:props="treeProps"
:data="menudatas"
show-checkbox
node-key="id"
:check-strictly="!checkStrictly"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedData"
/>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleSubmit"> 确定 </el-button>
</div>
</template>
</el-dialog>在这段代码中，el-dialog包含了角色名称显示、菜单权限操作按钮（展开 / 折叠、全选 / 全不选、父子联动）以及一个el-tree组件用于展示菜单树结构。el-tree通过绑定menudatas数据来渲染菜单节点，并通过各种属性配置其行为，如check-strictly控制是否严格父子联动，default-expanded-keys和default-checked-keys分别设置默认展开和选中的节点。
二、数据与功能实现
在<script setup>部分，我们定义了各种数据和函数来实现菜单权限配置的核心功能。
1. 引入依赖和定义数据
import { ref, provide, watchEffect, onMounted } from "vue";
import { roleMenusPermissionData } from "./simulatedData.js";
import { getDynamicRoutes } from "@/utils/getData.js";
const props = defineProps({
roleId: {
Type: Number,
required: true,
},
});
const treeProps = {
label: (data) => data.meta.title,
};
// 获取菜单树结构
const menudatas = ref([]);
const checkAll = ref(false); // 全选
const expandAll = ref(true); // 展开
const checkStrictly = ref(true); // 父子联动
我们引入了 Vue 的响应式数据函数ref，以及用于依赖注入的 provide 等。通过 defineProps 接收父组件传递的roleId，这在实际应用中可用于根据不同角色加载不同的菜单权限数据。treeProps定义了如何显示el-tree节点的标签，即通过data.meta.title。menudatas用于存储菜单树的数据，checkAll、expandAll和checkStrictly分别控制全选、展开和父子联动的状态。
2. 数据加载与监听
watchEffect(() => {
// 仅模拟页面效果使用，根据不同id获取不同的菜单权限
if (props.roleId == 1) {
} else {
}
});
onMounted(() => {
getDynamicRoutes().then((res) => {
menudatas.value = res;
});
});watchEffect函数用于监听props.roleId的变化，这里只是简单的模拟，实际应用中可以根据不同的roleId从后端获取相应的菜单权限数据。onMounted钩子函数在组件挂载后执行，通过调用getDynamicRoutes函数从后端获取动态路由数据，并将其赋值给menudatas，从而渲染菜单树。
3. 全选 / 全不选功能实现
const handleCheckAllChange = (val) => {
const permissionIds = extractPermissionIds(menudatas.value);
if (val) {
treeRef.value.setCheckedKeys(permissionIds);
} else {
treeRef.value.setCheckedKeys([]);
}
};handleCheckAllChange函数在全选 / 全不选复选框状态改变时触发。它首先通过extractPermissionIds函数获取所有菜单节点的id，然后根据复选框的状态，使用treeRef.value.setCheckedKeys方法设置el-tree的选中节点。
4. 展开 / 折叠功能实现
const expandedKeys = ref([]);
const treeRef = ref(null);
//展开、折叠
const handleExpandAllChange = (value) => {
expandAll.value = value;
let nodes = treeRef.value.store._getAllNodes();
if (expandAll.value) {
nodes.forEach((item) => {
item.expanded = expandedKeys.value;
});
} else {
nodes.forEach((item) => {
item.expanded =!expandedKeys.value;
});
}
};handleExpandAllChange函数用于处理展开 / 折叠操作。它通过treeRef.value.store._getAllNodes()获取el-tree的所有节点，然后根据expandAll的值，遍历节点并设置其expanded属性，从而实现展开或折叠所有节点的效果。
5. 父子联动功能实现
// 父子联动
const handleCheckStrictlyChange = (val) => {
// 因为后端返回的id包括了父节点的id,父子联动时如果有父节点则默认会将所有子节点勾选，为了避免这种情况，所有需要把后台返回的父节点id筛出去
if (val) {
treeRef.value.setCheckedKeys(extractChildPermissionIds(menudatas.value));
}
};handleCheckStrictlyChange函数在父子联动复选框状态改变时触发。当开启父子联动时，它通过extractChildPermissionIds函数获取所有子菜单节点的id，并使用treeRef.value.setCheckedKeys方法设置el-tree的选中节点，以确保在父子联动模式下，只勾选子菜单节点，避免因父节点勾选而自动勾选所有子节点的问题。
6. 提交功能实现
// 提交
const handleSubmit = () => {
// 将选中的id数组上传至后台接口,根据后端的要求，如果需要穿父节点，那checkedKeys和halfCheckedKeys都需要上传
const checkedKeys = treeRef.value.getCheckedKeys()
const halfCheckedKeys = treeRef.value.getHalfCheckedKeys()
console.log(
treeRef.value.getCheckedKeys(),
treeRef.value.getHalfCheckedKeys()
);
emits("close");
};handleSubmit函数在用户点击确定按钮时触发。它通过treeRef.value.getCheckedKeys()和treeRef.value.getHalfCheckedKeys()获取已选中和半选中的节点id，然后可以将这些id数组上传至后端接口，完成菜单权限的配置更新。最后，通过emits(“close”)关闭弹窗。
三、样式调整
在