vxe-select下拉框：人员选择功能实现方案
作者：袖梨
2026-05-27
在Web开发中，人员选择器是常见的交互组件。本文将详细讲解如何通过vxe-select组件实现一个功能丰富的人员选择器，包含头像展示、状态标签、多选和搜索等实用特性。
效果
多选、清空、筛选
自定义选项模板（头像 + 姓名 + 状态标签）
下拉框尺寸定制
状态映射（离职/试用期）
代码
{{ option.label }}
{{
getUserStatus(option.status)
}}
import { reactive, ref } from 'vue'const val1 = ref()const selectOptions = reactive({
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/avatar
