vue3中通过数据字典实现下拉选择框的组件封装

1.下拉选择框组件文件

<template>
	<el-select v-model="model" :placeholder :disabled :clearable style="width: 100%; min-width: 200px">
		<el-option v-for="item in dataList" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]"></el-option>
	</el-select>
</template>

<script setup lang="ts" name="MaDataSelect">
import { PropType, ref, watch } from 'vue'
import { useDataApi } from '@/api/common'

interface Prop {
	value: any
	label: string
}
const prop = defineProps({
	url: {
		type: String,
		default: ''
	},
	data: {
		type: Array,
		default: () => []
	},
	props: {
		type: Object as PropType<Prop>,
		required: false,
		default: () => ({
			value: 'id',
			label: 'name'
		})
	},
	clearable: {
		type: Boolean,
		required: false,
		default: () => true
	},
	disabled: {
		type: Boolean,
		required: false,
		default: () => false
	},
	placeholder: {
		type: String,
		required: false,
		default: () => ''
	}
})

watch(
	() => prop.data,
	val => {
		dataList.value = val
	},
	{ deep: true }
)

const model = defineModel<number | string>()

// 获取列表
const dataList = ref<any[]>()
const getDataList = async () => {
	if (prop.url.length === 0) {
		return
	}
	dataList.value = await useDataApi(prop.url)
}

getDataList()
</script>

2.调用接口文件

import service from '@/utils/request'

export const useDataApi = async (url: string) => {
	const { data } = await service.get(url)

	return data
}

3.页面使用的时候

<el-form-item prop="status">
    <ma-dict-select v-model="state.queryForm.status" dict-type="success_fail" clearable placeholder="状态"></ma-dict-select>
</el-form-item>

注意在我的代码结构中数据字典是这样的，同理使用的时候学会原理就OK！