异世界极道传说
780.72MB · 2025-10-18
vue 下拉框 vxe-select 实现人员选择下拉列表
使用自定义选项插槽的方式，可以灵活的实现各种类型的下拉选择
官网：https://vxeui.com
github：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui
需要注意当每一行高度超多默认高度时，必须要设置 option-config.height 来自定义选项高度
<template> <div> <vxe-select v-model="val1" placeholder="人员选择" :options="opts1" :option-config="{height: 40}" multiple filterable clearable> <template #option="{ option }"> <div class="user-select-item"> <img :src="option.url" class="user-select-img" /> <span class="user-select-name"> <span>{{ option.label }}</span> <span v-if="option.status" :class="['user-select-status', option.status]">{{ getUserStatus(option.status) }}</span> </span> </div> </template> </vxe-select> </div></template><script setup>import { ref } from 'vue'const val1 = ref()const opts1 = ref([ { 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' }])const getUserStatus = (status) => { switch (status) { case 'dimission': return '离职' case 'trial': return '试用期' } return ''}</script><style lang="scss" scoped>.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>https://gitee.com/x-extends/vxe-pc-ui
