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!