选择用户/角色
约 908 字大约 3 分钟
2025-05-24
SelectUsersCom是一个用于选择用户或角色的组件,提供了两种使用方式:
- 对话框模式 (index.vue)
- 输入框触发模式 (indexwithinput.vue)
基础对话框组件 (index.vue)
组件功能
- 支持选择用户或角色
- 支持组织树结构浏览
- 支持搜索功能
- 支持分页显示
- 支持已选项目可视化管理
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
ignoreAuth | Boolean | false | 是否忽略登录用户权限,直接获取全部数据 |
selectType | String | 'User' | 选择类型,'User'表示选择用户,'Role'表示选择角色 |
orgId | String | - | 组织ID,如果为空则显示左边树状结构 |
userNames | String | - | 用户名称(逗号分隔) |
users | Object | - | 初始选中项ID列表或对象列表 |
inType | String | 'id' | 父级传入的是id列表还是对象列表,取值为'id'或'obj' |
modelValue | Boolean | false | 控制对话框显示 |
事件说明
事件名 | 说明 |
---|---|
update:userNames | 更新用户名称 |
update:users | 更新用户列表 |
save | 保存选择结果 |
update:modelValue | 更新对话框显示状态 |
使用示例
<template>
<el-button @click="showDialog = true">选择用户</el-button>
<SelectUsersCom
v-model="showDialog"
:ignore-auth="true"
select-type="User"
v-model:users="selectedUsers"
v-model:userNames="selectedNames"
@save="handleSave"
/>
</template>
<script setup>
import { ref } from 'vue'
import SelectUsersCom from '@/components/SelectUsersCom/index.vue'
const showDialog = ref(false)
const selectedUsers = ref([])
const selectedNames = ref('')
const handleSave = () => {
console.log('已选用户ID:', selectedUsers.value)
console.log('已选用户名称:', selectedNames.value)
}
</script>
输入框触发模式 (indexwithinput.vue)
组件功能
- 默认显示为输入框
- 点击输入框弹出选择对话框
- 支持根据用户ID自动获取用户姓名
- 支持选择用户并回显名称
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
users | Array/String | - | 用户ID列表或单个用户ID |
userNames | String | '' | 用户名称(逗号分隔) |
placeholder | String | '' | 输入框占位符 |
ignoreAuth | Boolean | false | 是否忽略权限限制 |
事件说明
事件名 | 说明 |
---|---|
users-change | 用户选择变更时触发,参数为('users', 选中的用户ID列表)或('Texts', 选中的用户名称) |
使用示例
<template>
<SelectUsersComInput
:users="selectedUserIds"
:user-names="selectedUserNames"
placeholder="请选择用户"
:ignore-auth="true"
@users-change="handleUsersChange"
/>
</template>
<script setup>
import { ref } from 'vue'
import SelectUsersComInput from '@/components/SelectUsersCom/indexwithinput.vue'
const selectedUserIds = ref(['user1', 'user2'])
const selectedUserNames = ref('张三,李四')
const handleUsersChange = (type, value) => {
if (type === 'users') {
selectedUserIds.value = value
} else if (type === 'Texts') {
selectedUserNames.value = value
}
}
</script>
角色选择输入框 (SelectRoles/indexwithinput.vue)
组件功能
- 基于SelectUsersCom实现的角色选择器
- 默认显示为输入框
- 点击输入框弹出选择角色对话框
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
roles | Array | - | 角色ID列表 |
userNames | String | - | 角色名称(逗号分隔) |
placeholder | String | - | 输入框占位符 |
ignoreAuth | Boolean | false | 是否忽略权限限制 |
事件说明
事件名 | 说明 |
---|---|
roles-change | 角色选择变更时触发,参数为('roles', 选中的角色ID列表)或('Texts', 选中的角色名称) |
使用示例
<template>
<SelectRolesInput
:roles="selectedRoleIds"
:user-names="selectedRoleNames"
placeholder="请选择角色"
:ignore-auth="true"
@roles-change="handleRolesChange"
/>
</template>
<script setup>
import { ref } from 'vue'
import SelectRolesInput from '@/components/SelectRoles/indexwithinput.vue'
const selectedRoleIds = ref(['role1', 'role2'])
const selectedRoleNames = ref('管理员,操作员')
const handleRolesChange = (type, value) => {
if (type === 'roles') {
selectedRoleIds.value = value
} else if (type === 'Texts') {
selectedRoleNames.value = value
}
}
</script>
注意事项
- 使用indexwithinput.vue时,如果在弹出框中使用,建议设置
:destroy-on-close="true"
,避免names记录上一次选中行的值 - 选择用户时可以通过组织树进行筛选,也可以直接搜索
- ignoreAuth属性可以控制是否忽略用户权限限制,直接获取全部数据
- 组件内部会自动处理用户ID和用户名称的映射关系