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。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值