admin-vue3/src/views/member/level/components/MemberLevelSelect.vue

47 lines
1.0 KiB
Vue

<template>
<el-select v-model="levelId" placeholder="请选择用户等级" clearable class="!w-240px">
<el-option v-for="level in levelOptions" :key="level.id" :label="level.name" :value="level.id">
<span class="flex items-center gap-x-8px">
<el-avatar :src="level.icon" size="small" />
{{ level.name }}
</span>
</el-option>
</el-select>
</template>
<script lang="ts" setup>
import * as LevelApi from '@/api/member/level'
/** 会员等级选择框 **/
defineOptions({ name: 'MemberLevelSelect' })
const props = defineProps({
/** 下拉框选中值 **/
modelValue: {
type: Number,
default: undefined
}
})
const emit = defineEmits(['update:modelValue'])
const levelId = computed({
get() {
return props.modelValue
},
set(value: any) {
emit('update:modelValue', value)
}
})
const levelOptions = ref<LevelApi.LevelVO[]>([])
const getList = async () => {
levelOptions.value = await LevelApi.getSimpleLevelList()
}
/** 初始化 */
onMounted(() => {
getList()
})
</script>