vxe-select 下拉框实现人员选择

在实际业务中下拉选择人员是一个常见需求。本文介绍如何使用 vxe-select 组件实现一个带头像、状态标签、多选、搜索等功能的人员选择器。效果多选、清空、筛选自定义选项模板头像 姓名 状态标签下拉框尺寸定制状态映射离职/试用期代码templatedivvxe-selectv-modelval1v-bindselectOptionstemplate#option{ option }divclassuser-select-itemimg:srcoption.urlclassuser-select-img/spanclassuser-select-namespan{{ option.label }}/spanspanv-ifoption.status:class[user-select-status, option.status]{{ getUserStatus(option.status) }}/span/span/div/template/vxe-select/div/templatescriptsetupimport{reactive,ref}fromvueconstval1ref()constselectOptionsreactive({multiple:true,filterable:true,clearable:true,showCheckbox:true,showCloseButton:true,placeholder:人员选择,optionConfig:{height:40},popupConfig:{width:300,height:420},options:[{label:张三,value:1,status:dimission,url:https://vxeui.com/resource/avatarImg/avatar1.jpeg},{label:小明,value:2,status:,url:https://vxeui.com/resource/avatarImg/avatar2.jpeg},{label:老刘,value:3,status:trial,url:https://vxeui.com/resource/avatarImg/avatar3.jpeg},{label:李四,value:4,status:,url:https://vxeui.com/resource/avatarImg/avatar4.jpeg},{label:老六,value:5,status:trial,url:https://vxeui.com/resource/avatarImg/avatar5.jpeg},{label:王五,value:6,status:,url:https://vxeui.com/resource/avatarImg/avatar6.jpeg},{label:小陈,value:7,status:,url:https://vxeui.com/resource/avatarImg/avatar7.jpeg},{label:老徐,value:8,status:dimission,url:https://vxeui.com/resource/avatarImg/avatar8.jpeg},{label:小瑞,value:9,status:,url:https://vxeui.com/resource/avatarImg/avatar9.jpeg},{label:小马,value:10,status:,url:https://vxeui.com/resource/avatarImg/avatar10.jpeg},{label:小徐,value:11,status:trial,url:https://vxeui.com/resource/avatarImg/avatar11.jpeg},{label:小三,value:12,status:dimission,url:https://vxeui.com/resource/avatarImg/avatar12.jpeg},{label:老李,value:13,status:,url:https://vxeui.com/resource/avatarImg/avatar13.jpeg},{label:小四,value:14,status:,url:https://vxeui.com/resource/avatarImg/avatar14.jpeg},{label:小李,value:15,status:trial,url:https://vxeui.com/resource/avatarImg/avatar15.jpeg}]})constgetUserStatus(status){switch(status){casedimission:return离职casetrial:return试用期}return}/scriptstylelangscssscoped.user-select-item{position:relative;height:40px;display:flex;flex-direction:row;align-items:center;}.user-select-img{width:30px;height:30px;border-radius:50%;}.user-select-name{padding-left:5px;}.user-select-status{font-size:12px;position:absolute;top:0;padding-left:5px;.dimission{color:red;}.trial{color:orange;}}/style说明动态数据源将 options 替换为 API 请求结合 filterable 实现远程搜索。性能优化如果人员数量较大1000建议使用 virtual-scroll 虚拟滚动https://vxeui.com