企业官网建设流程全解析

深圳网站制作哪里找,自己电脑做采集网站,如何对网站ftp进行上传,收费下载网站源码在Vue#xff08;结合Element UI#xff09;中实现“搜索角色下拉选择添加到列表”的功能#xff0c;可以通过输入框下拉面板列表渲染的组合实现#xff0c;以下是贴合你截图效果的具体实现方案#xff1a; 一、核心思路 维护3组数据#xff1a; allRoles#xff1a;所有…在Vue结合Element UI中实现“搜索角色下拉选择添加到列表”的功能可以通过输入框下拉面板列表渲染的组合实现以下是贴合你截图效果的具体实现方案一、核心思路维护3组数据allRoles所有可选的角色字典从后端接口获取searchRole搜索框输入的关键词roleList已添加的角色列表包含角色信息人员选择项交互逻辑输入关键词时过滤allRoles得到匹配的角色列表选择角色后点击“添加角色”将其插入roleList需去重已添加的角色右侧显示“待填”实际是人员选择下拉框。二、Vue组件实现代码template div classrole-config !-- 已添加的角色列表 -- div classrole-item v-for(item, index) in roleList :keyindex el-select v-modelitem.roleCode disabled stylewidth: 120px; margin-right: 10px; el-option :labelitem.roleName :valueitem.roleCode / /el-select el-select v-modelitem.userId placeholder待填 stylewidth: 180px; changehandleUserChange(item, $event) el-option v-foruser in userOptions :keyuser.userId :labeluser.nickName :valueuser.userId / /el-select /div !-- 角色搜索添加区域 -- div classrole-add-area stylemargin-top: 10px; el-input v-modelsearchRole placeholder搜索角色名称 prefix-iconel-icon-search stylewidth: 200px; margin-right: 10px; inputfilterRoles / !-- 下拉角色列表搜索结果 -- el-popover v-modelrolePopoverVisible triggermanual placementbottom-start stylewidth: 200px; div classrole-option v-forrole in filteredRoles :keyrole.code clickselectRole(role) {{ role.name }} /div /el-popover el-button typeprimary clickaddRoleToList iconel-icon-plus 添加角色 /el-button /div /div /template script // 假设从后端接口获取角色和用户列表 import { getRoleDict, listUser } from /api/project/role; export default { name: RoleAddList, data() { return { allRoles: [], // 所有角色字典格式{code: PM, name: 项目经理} searchRole: , // 搜索关键词 filteredRoles: [], // 搜索过滤后的角色列表 selectedRole: null, // 选中的待添加角色 rolePopoverVisible: false, // 角色下拉面板显隐 roleList: [], // 已添加的角色列表含人员 userOptions: [] // 系统用户列表人员选择项 }; }, created() { this.loadBaseData(); }, methods: { // 加载角色字典和用户列表 async loadBaseData() { // 1. 加载所有角色从后端字典接口 const roleRes await getRoleDict(); this.allRoles roleRes.data; this.filteredRoles [...this.allRoles]; // 2. 加载系统用户人员选择项 const userRes await listUser({ pageNum: 1, pageSize: 200 }); this.userOptions userRes.data.rows; }, // 搜索过滤角色 filterRoles() { if (!this.searchRole) { this.filteredRoles [...this.allRoles]; } else { this.filteredRoles this.allRoles.filter(role role.name.includes(this.searchRole.trim()) ); } this.rolePopoverVisible true; // 显示下拉面板 }, // 选择某个角色点击下拉项 selectRole(role) { this.selectedRole role; this.searchRole role.name; // 输入框显示选中的角色名 this.rolePopoverVisible false; // 关闭下拉面板 }, // 添加选中的角色到列表 addRoleToList() { if (!this.selectedRole) { this.$message.warning(请先选择要添加的角色); return; } // 检查角色是否已存在去重 const isDuplicate this.roleList.some( item item.roleCode this.selectedRole.code ); if (isDuplicate) { this.$message.warning(该角色已添加请勿重复); return; } // 添加到角色列表 this.roleList.push({ roleCode: this.selectedRole.code, roleName: this.selectedRole.name, userId: null, // 人员ID待选 userName: // 人员名称待选 }); // 重置搜索状态 this.searchRole ; this.selectedRole null; }, // 选择人员后更新人员名称 handleUserChange(item, userId) { const selectedUser this.userOptions.find(u u.userId userId); item.userName selectedUser ? selectedUser.nickName : ; } } }; /script style scoped .role-item { margin-bottom: 8px; display: flex; align-items: center; } .role-option { padding: 6px 12px; cursor: pointer; } .role-option:hover { background-color: #f5f7fa; } .role-add-area { display: flex; align-items: center; } /style三、关键功能说明搜索过滤输入关键词时通过filter方法从allRoles中筛选匹配的角色用el-popover实现下拉面板展示过滤后的角色选项。角色选择点击下拉角色项时将角色信息赋值给selectedRole并填充到搜索框关闭下拉面板准备添加。去重添加添加前检查roleList中是否已有相同roleCode的角色避免重复向roleList中推送角色信息同时初始化人员选择项“待填”状态。人员选择每个角色右侧的el-select绑定userId选择后自动更新userName。