element--select封装

一、应用场景

项目里不同页面使用同一个业务功能的select框，或者自己公司的业务封装后给组内人员使用…业务场景很多，至于需不需要，因人而异。

二、封装步骤

1. components里新建文件夹

在前端项目components里新建文件夹SelectProvince，SelectProvince下新建vue文件：index.vue
新建文件夹的好处：

1. 文档分类清晰；
2. 如果有js，可以方便运维、

2. index.vue

<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>

3. 使用

//调用
<el-form-item>
	<select-province @province="selectedProvince" placeholder="选择生源省份" />
</el-form-item>

import SelectProvince from '@/components/SelectProvince'
components: { SelectProvince },
  
methods: {
  //接受select的值{对象}
  selectedProvince(payload) {
  	this.forms.studioAreaCode = payload.provinceCode
  },
}

4. 注意

1. 组件在引用时一般使用驼峰命名法：SelectProvince。在调用时改为中间线连接：select-province。
2. @province这个province与index.vue的select组件的value-key相关联。
3. 选中数据后回显，利用this.$emit。