vxe-select下拉框：人员选择功能实现方案

在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