vue 下拉框 vxe-select 实现人员选择下拉列表
<p>vue 下拉框 vxe-select 实现人员选择下拉列表<br>使用自定义选项插槽的方式，可以灵活的实现各种类型的下拉选择</p>
<p>官网：https://vxeui.com<br>
github：https://github.com/x-extends/vxe-pc-ui<br>
gitee：https://gitee.com/x-extends/vxe-pc-ui</p>
<p><img src="https://i-blog.csdnimg.cn/direct/67179f8b6f8443dbaf5d74f4b6db23d0.png"></p>
<p>需要注意当每一行高度超多默认高度时，必须要设置 option-config.height 来自定义选项高度</p>
<pre><code class="language-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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-pc-ui</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19145996
頁:
[1]