菜单选择器组件

概述

ZqMenuSelector 是一个菜单选择器组件，支持从系统菜单树中选择菜单，支持单选和多选模式，以及级联选择功能。

组件路径：web/apps/web-ele/src/components/zq-form/zq-menu-selector/

组件名称：ZqMenuSelector

功能特性

• 树形菜单展示
• 单选/多选模式
• 级联选择（选中父级自动选中子级）
• 支持 Dialog 和 Popup 两种显示模式
• 菜单图标显示
• 国际化菜单名称
• 可过滤只显示系统菜单

Props

属性	类型	默认值	说明
modelValue	string | string[] | null	null	选中的菜单 ID
mode	'dialog' | 'popup'	'dialog'	显示模式
placeholder	string	'请选择菜单'	占位符
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
multiple	boolean	false	是否多选
dialogTitle	string	'选择菜单'	弹窗标题
dialogWidth	string	'400px'	弹窗宽度
applicationId	string	-	应用 ID（不传则使用当前应用）
systemOnly	boolean	false	是否只显示系统菜单

Events

事件	参数	说明
update:modelValue	string | string[] | null	值更新
change	MenuItem | MenuItem[] | null	选中菜单变化
select	MenuItem	选择菜单

Expose 方法

方法	参数	说明
open	-	打开选择弹窗
close	-	关闭选择弹窗
loadMenuTree	-	加载菜单树

使用示例

基本用法（单选）

<template>
  <ZqMenuSelector v-model="menuId" />
</template>

<script setup>
import { ref } from 'vue';

const menuId = ref(null);
</script>

多选模式

<template>
  <ZqMenuSelector
    v-model="menuIds"
    :multiple="true"
    dialog-title="选择菜单权限"
  />
</template>

<script setup>
import { ref } from 'vue';

const menuIds = ref([]);
</script>

只显示系统菜单

<template>
  <ZqMenuSelector
    v-model="menuId"
    :system-only="true"
  />
</template>

Popup 模式

<template>
  <ZqMenuSelector
    v-model="menuId"
    mode="popup"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 menu-selector 类型的表单项使用：

{
  "type": "menu-selector",
  "field": "menu_id",
  "label": "关联菜单",
  "props": {
    "multiple": false,
    "systemOnly": false,
    "placeholder": "请选择菜单"
  }
}

级联选择说明

在多选模式下，选择父级菜单会自动选中所有子级菜单，取消选择父级也会取消所有子级的选择。

典型应用场景

• 权限配置：配置角色的菜单权限
• 菜单关联：配置功能与菜单的关联
• 快捷入口：配置用户的快捷菜单
• 导航配置：配置自定义导航菜单