vue2-element-dict、vue3-element-dict、vue2-vant-dict、vue3-vant3-dict字典包，vue2-water-marker、vue3-water-marker防篡改的水印插件包，vue-axios-optimize请求优化包，大家有兴趣的可在npm官网搜索了解下，有疑问可咨询小布。
https://www.xiaobusoft.com 爆米花小布官方域名，有兴趣的可查阅。
https://www.xiaobusoft.com/vue2-element-admin
前言
大家好，我是沈小布，勤能补拙，实践是检验真理的唯一标准是我的座右铭，帮助同行人员少走弯路，提高开发效率，提升代码质量是我的初心。
主题
今天的主题是分享一个给角色分配用户最简单的产品设计。
页面展示及介绍
展示效果如下，包含搜索条件、查询已分配的所有用户按钮等。（页面可能不好看，但是精华在于一个弹框实现了快速查到需要分配的用户，也可快速查询所有已分配的用户），前端是如何实现的更是经典，认真阅读下去绝对真香。
1. 分配用户页面展示列表为系统所有用户分页查询
2. 已分配的用户会被勾选
3. 点击【查看已分配的用户】按钮可查询当前角色已分配的所有用户（分页查询）
4. 根据查询条件查询后的列表，勾选和去除勾选后点击保存不影响已分配但是未出现在查询结果中的用户。
实现分析
大致思路如下：
1. 进分配页面时获取当前角色的所有已分配用户的id数组，并记录为 userIds
2. el-table组件记录已渲染的列表中被选中的用户的id数组，并记录为 ids
3. 搜索查询成功后渲染列表，判断列表中的用户是否存在已分配的用户，如果存在把它记录到变量名为 listSelectIds 指当前已分配的用户中哪些已被加载过。
4. 为了避免重复添加 listSelectIds 我们得定义一个变量 isRenderPage，用于控制当前页是否已经渲染过，已渲染过的列表不再给 listSelectIds 添加数据
5. 点击保存时。
1) 我们通过 listSelectIds 和 ids 来确定该角色原本有分配的用户，而现在属于被去除掉了的用户数组记录为 removeIds。即 removeIds 记录的是listSelectIds 存在 而 ids 不存在的 用户列表。
2) 我们通过 listSelectIds 和 ids 来确定该角色原本未分配的用户，而现在属于被新增的用户数组记录为 addIds。即 addIds 记录的是listSelectIds 不存在 而 ids 存在的 用户列表。
3) 我们通过 userIds、removeIds
和 addIds 可以最终确认给当前角色分配的所有用户，记录为 resultIds 。userIds 去除 removeIds 再加上 addIds就是我们的 resultIds.
4) 将最终用户id列表调用保存接口即可实现。
6. 点击重置、重新搜索或者查询已分配的所有用户之前，清空上述关键数据并重新渲染。
大致代码
避免文章过长，仅展示部分代码
表格关键代码
<div class="table-box"><el-tableref="roleUserTable":class="{'empty': list.length === 0}"empty-text=" "v-loading="loading":data="list"row-key="userId"@selection-change="handleSelectionChange"@row-click="clickRow"height="526px"><el-table-columntype="selection":reserve-selection="true"width="55"align="center"/><el-table-column-dictmaskType="mobile"label="手机号"prop="phoneNumber"align="center"min-width="120px"/><el-table-column-dictdictType="SEX"label="用户性别"prop="sex"align="center"min-width="80px"/></el-table><paginationv-show="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/></div>
el-table-column-dict 组件
可查阅 https://www.xiaobusoft.com/vue2-element-dict
渲染
// 渲染选中的数据renderSelectTable() {if (this.isRenderPage.includes(this.queryParams.pageNum) ||this.userIds.length === 0) {return}this.isRenderPage.push(this.queryParams.pageNum)for (let i = 0; i < this.list.length; i++) {const item = this.list[i]if (this.userIds.includes(item.userId)) {this.listSelectIds.push(item.userId)this.$nextTick(() => {this.$refs.roleUserTable.toggleRowSelection(item, true)})}}},
保存
// 保存async save() {// 获取已选中ids没有，listSelectIds有的userId：说明这些用户被移除勾选了const removeIds = [...new Set(this.listSelectIds)].filter((item) => !new Set(this.ids).has(item))// 获取已选中ids有，listSelectIds没有的userId：说明这些是新增的const addIds = [...new Set(this.ids)].filter((item) => !new Set(this.listSelectIds).has(item))// 利用最先的userIds 去除移除勾选的 添加新增的let resultIds = []// 去掉移除勾选的resultIds = [...new Set(this.userIds)].filter((item) => !new Set(removeIds).has(item))// 添加新增的resultIds = resultIds.concat(addIds)...}
体验
大家可以访问https://www.xiaobusoft.com/vue2-element-admin 体验。
开源：史上最强大的极简风后台管理框架——vue2-element-admin
如果您认可这样的分配用户的设计，请给个赞+在看+分享，如果您十分喜欢小编，文末帮忙给个喜欢，您的喜欢是小编努力的最大动力
，如果您不喜欢也可以底下留言吐槽，您的吐槽也是小编进步的源泉
。
总结
这就是给角色分配用户最简单的产品设计，给用户分配角色同理。
写在最后
希望我的文章能够或多或少帮助到大家，如果有点帮助，可分享给更多人，予人玫瑰，手有余香。最后可以的话三连击是对小编写文最大的动力。
公众号：爆米花小布专注分享web前端相关技术文章、工具包、软件工具等，如果喜欢我的分享，给 小布 点一个赞👍 或者 ➕关注都是对我最大的支持。
