element select 多選

<template>
  <div>
    <el-select 
        v-model="currentProvince"
        :placeholder="placeholder"
        value-key="province" 
        multiple
        filterable
        clearable
        @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: 'SelectProvince',
    props: {
        placeholder: {
            type: String,
            default: '請選擇省份'
        }
    },
    data() {
        return {
            currentProvince: null,
            options: []
        }
    },
    mounted() {
        this.getProvinceList()
    },
    methods: {
        handleProvince() {
            this.$emit('province', this.currentProvince)
            this.$forceUpdate()
        },
        getProvinceList() {
            getProvinceList().then(res => {
                this.options = res.result || []
            })
        }
    }
}
</script>
<style lang="scss" scoped>

</style>