vue+elementui管理项目界面,
这篇文章主要介绍了vue3使用元素加搭建后台管理系统之菜单管理，使用元素选择树组件快速开发树形菜单结构，el树组件中过滤节点法事件便可以实现树形菜单筛选过滤功能，需要的朋友可以参考下
菜单管理是一套系统中最常见最核心的系统管理模块之一，我把菜单管理分成了2个部分，左边可以管理维护菜单，在菜单的最右侧可以维护每个菜单按钮权限配置
使用元素加埃尔树组件快速开发树形菜单结构，el树组件中过滤节点法事件便可以实现树形菜单筛选过滤功能
模板
div class=公共树
埃尔树
:ref=treeRef
:data=treeData
:check-strictly=checkStrictly
显示-复选框
:accordion=false
node-key=id
默认-展开-全部
:highlight-current=true
:expand-on-click-node=false
@node-click=nodeClick
:filter-node-method=filterNode
empty-text=暂无数据
template #default={ node，data }
span class=自定义树节点
span style= margin-right:15px；{{ data.name }}/span
狭槽
:data=data
:node=node
/
/span
/模板
/el-tree
/div
/模板
脚本
从“vue”导入{参考，反应}
从" @babel/types "导入{ return语句}；
导出默认值{
名称：普通树，
道具：{
treeRef: {
类型：字符串，
默认值：" treeRef "
},
treeData: {
类型：数组，
必填：真，
默认(){
return []
}
},
严格检查：{
类型：布尔型，
默认(){
返回真实的
}
}
},
设置（道具，{ emit }) {
常量节点单击=(数据，节点，树)={
发出(节点单击，数据，节点，树)
}
const filterNode=(值，数据)={
如果(!值)返回真
返回数据.标签.包括(值)
}
返回{节点单击，筛选节点}
}
}
/脚本
使用对话框、图标、表单组件实现菜单新增编辑
埃尔对话组件实现弹窗，选择图标功能，父组件通过v型车绑定变量，子组件通过发出(更新语法糖实现父子组件属性快速传递
子组件代码：
模板
El-dialog width= 800 px v-model= visible title=图标：before-close=handleClose
ul class=iconUl
Li v-for=图标列表中的图标:key= icon
span:class= { active :choosed icon===icon }
@click=chooseIcon(icon)
@dblclick=确认（图标)
El-icon style= width:48px；高度：48px 组件 icon :is= icon //El-icon
/span
p{{ icon }}/p
/李
/ul
模板#页脚
span class=对话框页脚
El-button type= primary @ click= confirm(所选图标)确认/el-button
el-button @click=this .$emit(update:visible ，false)取消/el-button
/span
/模板
/el-dialog
/模板
脚本
从“vue”导入{参考，反应}
从" @element-plus/icons-vue "导入*作为图标模块
导出默认值{
名称："图标",
道具：{
可见：{
类型：布尔型，
默认值：错误
}
},
设置（道具，{ emit }) {
const iconList=ref([])
const choosedIcon=ref(null)
for(IconsModule中的定义变量键){
图标列表。价值。按下(图标模块[键]).姓名)
}
const chooseIcon=(icon)={
choosedIcon.value=icon
}
const confirm=(icon)={
发出(更新：图标，图标)
发出(更新：可见，假)
}
const handleClose=(done)={
发出(更新：可见，假)
}
返回{图标列表，选择图标，选择图标，确认，处理关闭}
}
}
父组件代码：
icons v-model:visible= dialogIconVisible v-model:icon= menu。图标/
使用元素加埃尔表组件实现菜单按钮权限配置
菜单按钮权限配置表格部分代码：
埃尔表
ref=resourceTableKey
:data= resource。表格数据。“记录”
种类
empty-text=暂无数据
:header-cell-style= { background: # FCFBFF ，border:0}
style=宽度：100%
@ selection-change= resources elect change
El-table-column type= selection width= 40 /
埃尔-表格-列标签=编码宽度=80 显示-溢出-工具提示
template # default=“scope”{ scope。划。代码} }/模板
/El-表格-列
埃尔-表格-列标签=名称宽度=80 显示-溢出-工具提示
template # default=“scope”{ scope。划。名称} }/模板
/El-表格-列
埃尔-表格-列标签=请求方式宽度=80 显示-溢出-工具提示
template # default=“scope”{ scope。划。方法} }/模板
/El-表格-列
埃尔-表格-列标签=请求地址宽度=80 显示-溢出-工具提示
template # default=“scope”{ scope。划。URL } }/模板
/El-表格-列
埃尔-表格-列标签=操作宽度=140
template #default=scope
El-button type= primary size= small @ click= resource edit(scope .$index，scope.row)
修改/el-button
埃尔按钮
类型=危险
大小=小
@click=resourceSingleDelete(范围 index，scope.row)
删除/el-button
/模板
/El-表格-列
/el-table
//- 编辑菜单按钮权限配置-
脚本
const resourceTableKey=ref(null)
const resource=reactive({
查询参数：{
代码：空，
名称：null，
menuId: null
},
表数据：{
总计：2,
记录：[]
},
分页：{
尺码：10,
当前：1
},
表单数据：{},
选择：[]
})
const resourceSearch=()={
getResourceList().然后(数据={
资源。表格数据。记录=数据。数据
})
}
const resourceAdd=()={
dialogEditVisible.value=true
resource.formData={}
}
const resourceEdit=(index，row)={
dialogEditVisible.value=true
resource.formData=row
}
const resourceSingleDelete=(index，row)={
ElMessageBox.confirm(确认删除？,
确认删除，
{
confirmButtonText:确认，
取消按钮文本： 取消，
确认按钮类：“确认按钮”，
类型：警告，
})。然后(()={
资源。表格数据。记录。拼接(索引，1)
})。catch(()={ })
}
const resourceSelectChange=(选择)={
资源选择=选择
}
const resourceBatchDelete=()={
如果(!资源。选择。长度){
ElMessageBox.alert(请选择要删除项!, 提示，{ confirmButtonText:确认，键入：警告 })
返回
}
ElMessageBox.confirm(确认删除？,
确认删除，
{
confirmButtonText:确认，
取消按钮文本： 取消，
类型：警告，
})。然后(()={
资源。表格数据。记录=资源。表格数据。记录。过滤器(功能(项目){
返回(资源。选择。过滤器(功能(选择项目){
返回selectionItems.id==items.id
})).长度==0
})
})。catch(()={ })
}
const resource return={ resource table key，resource，resourceEdit，resourceAdd，resourceSingleDelete，resourceSelectChange，resourceBatchDelete }
/脚本
//- 编辑菜单按钮权限配置-
菜单按钮权限配置表单部分代码：
模板
El-dialog width= 800 px v-model= visible title=修改：before-close=handleClose
El-form ref= form :model= from data label-position= right label-width= 100 px
El-表单-项目标签=编码prop=code
El-输入v-model=来自数据。代码/
注意建议使用：作为分隔符，并以查看、添加、更新、删除、导出、导入、下载、上传等关键词结尾/p
注意如：菜单：添加、资源：查看、文件：上传/p
/El-表单-项目
El-表单-项目标签=名称prop=name
El-输入v-model=来自数据。名称/
/El-表单-项目
El-表单-项目标签=请求方式道具=描述
El-输入v-model=来自数据。方法/
/El-表单-项目
El-表单-项目标签=请求地址道具=描述
El-输入v-model=来自数据。URL /
/El-表单-项目
El-表单-项目标签=描述道具=描述
El-输入v-model=来自数据。描述/
/El-表单-项目
/el格式
模板#页脚
span class=对话框页脚
El-button type= primary @ click= confirm()确认/el-button
el-button @click=this .$emit(update:visible ，false)取消/el-button
/span
/模板
/el-dialog
/模板
脚本
从“vue”导入{参考、反应、观察}
从" @babel/types "导入{ return语句}；
导出默认值{
名称：编辑，
道具：{
可见：{
类型：布尔型，
默认值：错误
},
资源：{
类型：对象，
默认值：()=({})
}
},
设置（道具，{ emit }) {
const fromData=reactive({})
watch(()=props.resource，(newResource)={
对于(来自数据中的常量键){
fromData[key]=
}
对于(新资源中的常量键){
fromData[key]=newResource[key]
}
}，{ immediate: true })
常量确认=()={
对于(来自数据中的常量键){
道具。资源[键]=来自数据[键]
}
发出(更新：可见，假)
}
const handleClose=(done)={
发出(更新：可见，假)
}
返回{确认，处理关闭，来自数据}
}
}
/脚本
到此这篇关于vue3使用元素加搭建后台管理系统-菜单管理的文章就介绍到这了，更多相关vue3element-plus后台管理系统内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。