输入框+下拉面板+列表渲染

在Vue（结合Element UI）中实现“搜索角色+下拉选择+添加到列表”的功能，可以通过输入框+下拉面板+列表渲染的组合实现，以下是贴合你截图效果的具体实现方案：

一、核心思路

1. 维护3组数据：
   • allRoles：所有可选的角色字典（从后端接口获取）；
   • searchRole：搜索框输入的关键词；
   • roleList：已添加的角色列表（包含角色信息+人员选择项）；
2. 交互逻辑：
   • 输入关键词时，过滤allRoles得到匹配的角色列表；
   • 选择角色后，点击“添加角色”将其插入roleList（需去重）；
   • 已添加的角色右侧显示“待填”（实际是人员选择下拉框）。

二、Vue组件实现代码

<template> <div class="role-config"> <!-- 已添加的角色列表 --> <div class="role-item" v-for="(item, index) in roleList" :key="index"> <el-select v-model="item.roleCode" disabled style="width: 120px; margin-right: 10px;" > <el-option :label="item.roleName" :value="item.roleCode" /> </el-select> <el-select v-model="item.userId" placeholder="待填" style="width: 180px;" @change="handleUserChange(item, $event)" > <el-option v-for="user in userOptions" :key="user.userId" :label="user.nickName" :value="user.userId" /> </el-select> </div> <!-- 角色搜索+添加区域 --> <div class="role-add-area" style="margin-top: 10px;"> <el-input v-model="searchRole" placeholder="搜索角色名称" prefix-icon="el-icon-search" style="width: 200px; margin-right: 10px;" @input="filterRoles" /> <!-- 下拉角色列表（搜索结果） --> <el-popover v-model="rolePopoverVisible" trigger="manual" placement="bottom-start" style="width: 200px;" > <div class="role-option" v-for="role in filteredRoles" :key="role.code" @click="selectRole(role)" > {{ role.name }} </div> </el-popover> <el-button type="primary" @click="addRoleToList" icon="el-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>

三、关键功能说明

1. 搜索过滤：

   • 输入关键词时，通过filter方法从allRoles中筛选匹配的角色；
   • 用el-popover实现下拉面板，展示过滤后的角色选项。

2. 角色选择：

   • 点击下拉角色项时，将角色信息赋值给selectedRole，并填充到搜索框；
   • 关闭下拉面板，准备添加。

3. 去重添加：

   • 添加前检查roleList中是否已有相同roleCode的角色，避免重复；
   • 向roleList中推送角色信息，同时初始化人员选择项（“待填”状态）。

4. 人员选择：

   • 每个角色右侧的el-select绑定userId，选择后自动更新userName。
     ？