自己封装的基于ant design vue 的下拉框的组件

接手别人的项目，明明已经封装好了下拉框的组件，奈何某些人嫌弃不好用不能试用其他所有的接口。没办法，自己封一个组件吧。各位觉得好用可以收藏一下，我也是为了下次懒得动手就拿上来保存着吧。

<template><div><a-selectv-model="value_":default-value="defaultValue"@change="handleChange":placeholder="placeholder"allowClear><a-select-option v-for="item in selectList" :key="item[props.id]" :value="item[props.id]">{{ item[props.label] }}</a-select-option></a-select></div>
</template>
<script>
import { getPublicSelectList } from "@/api/api.js";export default {name: 'PublicSelect',props: {/*下拉框的接口地址url */url: {type: String,default: ''},/* 如果当前下卡框有参数，传params */params: {type: Object,default: () => { }},/* props对应下拉框的id和label，默认情况下id为‘value’，label为‘label’ */props: {type: Object,default: {id: 'value',label: 'label'}},/* 提示文字 */placeholder: {type: String,default: '请选择'},/* 如果需要默认值，对应的是下拉框id */defaultValue: {type: String,default: ''},/* 绑定的字段 */value: {type: String,default: ''},},data() {return {selectList: [],value_:this.value?this.value:undefined}},watch: {props: {deep: true,handler(newvalue, oldvalue) {if (Object.values(newvalue).length) {const first = Object.keys(newvalue)const second = Object.keys(oldvalue)if (first.length != second.length) {return}for (let i in newvalue) {if (newvalue[i] != oldvalue[i]) {return}}this.init()}}},value:{handler(newvalue, oldvalue) {if(!newvalue){this.value_ = undefined}}}},created() {this.init()},methods: {init() {getPublicSelectList(this.url, this.params).then(res => {this.selectList = res.result})},handleChange(value) {this.$emit('update:value', value)},},}
</script>
<style lang='less' scoped>
</style>

然后使用的地方

<PublicSelect :value.sync="queryParam.status" url="/api/list/payment_status" :props="{id:'value',label:'label'}" placeholder="交易状态" style="width: 180px"/>