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

使用自定义选项插槽的方式，可以灵活的实现各种类型的下拉选择

github：https://github.com/x-extends/vxe-pc-ui

gitee：https://gitee.com/x-extends/vxe-pc-ui

需要注意当每一行高度超多默认高度时，必须要设置 option-config.height 来自定义选项高度

html 复制代码

<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