element select 封装

<template>
  <div>
    <el-select 
        v-model="currentProvince"
        :placeholder="placeholder"
        value-key="province" 
        clearable
        filterable
        @clear="handleProvince"
        @change="handleProvince"
    >
        <el-option
            v-for="item in options"
            :key="item.provinceCode"
            :label="item.province"
            :value="item"
        >
        </el-option>
    </el-select>
  </div>
</template>
<script>
import { getProvinceList } from '@/api/paper'
export default {
    name: 'SelectMultipleProvince',
    props: {
        placeholder: {
            type: String,
            default: '请选择省份'
        }
    },
    data() {
        return {
            currentProvince: null,
            options: []
        }
    },
    mounted() {
        this.getProvinceList()
    },
    methods: {
        handleProvince() {
            this.$emit('province', this.currentProvince)
        },
        getProvinceList() {
            getProvinceList().then(res => {
                this.options = res.result || []
            })
        }
    }
}
</script>
<style lang="scss" scoped>

</style>

//调用
<el-form-item>
<select-province @province="selectedProvince" placeholder="选择生源省份" />
</el-form-item>
<script>
import SelectProvince from '@/components/SelectProvince'
components: { ,SelectProvince },
methods: {
//接受select的值{对象}
selectedProvince(payload) {
this.forms.studioAreaCode = payload.provinceCode
},
}