封装一个城市下拉框组件

 子组件

子组件

<template>
    <div class="base-info">
        <el-select
            v-model="innerValue"
            :placeholder="placeholder"
            :disabled="disabled"
            :multiple="multiple"
            :collapse-tags="collapseTags"
            :filterable="filterable"
            :multiple-limit="multipleLimit"
            @change="onChange"
        >
            <el-option
                v-for="item in cityList"
                :key="item.managementCityId"
                :label="item.managementCityName"
                :value="item.managementCityId"
                :disabled="item.disabled"
            >
                <div v-if="showManagementCityId">
                    <span style="float: left">{{ item.managementCityName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.managementCityId }}</span>
                </div>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: 'CitySelect',
    props: {
        value: {
            type: [Array, Number, String],
            default: '',
        },
        placeholder: {
            type: String,
            default: '请选择城市',
        },
        // 整个下拉框是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        // 是否可清空,clearable属性仅适用于单选。
        clearable: {
            type: Boolean,
            default: true,
        },
        // 是否可多选
        multiple: {
            type: Boolean,
            default: false,
        },
        // 多选时用户最多可以选择的项目数，为 0 则不限制
        multipleLimit: {
            type: Number,
            default: 0,
        },
        // 是否可搜索
        filterable: {
            type: Boolean,
            default: true,
        },
        // 将它们合并为一段文字。
        collapseTags: {
            type: Boolean,
            default: true,
        },
        // 是否展示ID
        showManagementCityId: {
            type: Boolean,
            default: false,
        },
        // 是否展示全部
        canSelectAll: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            cityList: [],
            innerValue: this.value,
        };
    },
    computed: {

    },
    watch: {
        value: {
            // 详情和编辑的数据回显
            handler(newValue) {
                console.log('watch', newValue);
                this.innerValue = newValue;
            },
        },
    },
    created() {
        this.getCityList();
    },
    methods: {
        // 模拟请求数据
        getCityList() {
            console.log('模拟请求数据', this.value);
            setTimeout(() => {
                this.cityList = [
                    { managementCityId: '1', managementCityName: '北京' },
                    { managementCityId: '2', managementCityName: '和田' },
                    { managementCityId: '3', managementCityName: '拉萨' },
                    { managementCityId: '4', managementCityName: '成都' },
                    { managementCityId: '5', managementCityName: '武汉' },
                    { managementCityId: '6', managementCityName: '济源' },
                    { managementCityId: '7', managementCityName: '测试城市' }];
                if (this.canSelectAll) {
                    this.cityList.unshift({ managementCityId: '-1', managementCityName: '全部' });
                }
            }, 200);
        },
        // 城市下拉框发生变化
        onChange(val) {
            const item = this.cityList.find((city) => val === city.managementCityId);
            this.$emit('input', val);
            this.$emit('change', val, item);
        },
    },
};
</script>
 <style lang="scss" scoped>

 </style>

父组件

<template>
           <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="活动名称"
                    prop="name"
                >
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item
                    label="城市"
                    prop="cityId"
                >
                    [{{ ruleForm.cityId }}]
                    <wgyCitySelect
                        v-model="ruleForm.cityId"
                        multiple
                        show-management-city-id
                        :multiple-limit="2"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm')"
                    >
                        立即创建
                    </el-button>
                </el-form-item>
            </el-form>
</template>

<script>
    
import wgyCitySelect from './wgyCitySelect.vue';  // 引入子组件
export default {
    components: {
        wgyCitySelect,
    },
    data() {
        return {
            ruleForm: {
                name: '',
                cityId: ['1', '2'],
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                cityId: [
                    { required: true, message: '请选择城市', trigger: 'change' },
                ],
            },
    }}
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
    
</script>