本文主要是介绍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: anylabel: 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！
这篇关于vue3中通过数据字典实现下拉选择框的组件封装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
