简单的封装一个城市下拉框组件(可单选和多选)

子组件

<template>
    <el-select
        v-model="innerValue"
        :placeholder="placeholder"
        :multiple="multiple"
        :clearable="clearable"
        :collapse-tags="collapseTags"
        :filterable="filterable"
        :size="size"
        :multiple-limit="multipleLimit"
        :allow-create="allowCreate"
        @change="cityChange"
    >
        <el-option
            v-for="item in optionsList"
            :key="item.cityId"
            :label="item.cityName"
            :value="item.cityId"
        />
    </el-select>
</template>
<script>
import { defineComponent, ref, onMounted } from '@vue/composition-api';

export default defineComponent({
    name: 'CitySelect',
    props: {
        value: {
            type: [Number, Array],
            default: 0,
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: false,
        },
        // 是否可清空
        clearable: {
            type: Boolean,
            default: true,
        },
        // 多选时是否将选中值按文字的形式展示 +1那种
        collapseTags: {
            type: Boolean,
            default: false,
        },
        // 是否可搜索
        filterable: {
            type: Boolean,
            default: true,
        },
        // 占位符
        placeholder: {
            type: String,
            default: '请选择',
        },
        // 输入框尺寸
        size: {
            type: String,
            default: 'medium',
        },
        // 多选时用户最多可以选择的项目数，为 0 则不限制
        multipleLimit: {
            type: Number,
            default: 0,
        },
        // 是否允许用户创建新条目，需配合 filterable 使用
        allowCreate: {
            type: Boolean,
            default: false,
        },
        // 是否需要全部选项
        isAllSelect: {
            type: Boolean,
            default: false,
        },

    },
    setup(props, { emit }) {
        const innerValue = ref('');
        innerValue.value = props.value;
        const optionsList = ref([]);

        // 模拟接口
        const getCityList = () => {
            setTimeout(() => {
                optionsList.value = [
                    { cityId: 1, cityName: '广州' },
                    { cityId: 2, cityName: '深圳' },
                    { cityId: 3, cityName: '武汉' },
                    { cityId: 4, cityName: '上海' },
                    { cityId: 5, cityName: '北京' },
                ];
                // 如果需要展示全部选项且不是多选时展示
                if (props.isAllSelect && !props.multiple) {
                    optionsList.value.unshift({ cityId: -1, cityName: '全部' });
                }
            }, 3000);
        };

        onMounted(() => {
            getCityList();
        });

        // 城市发生变化
        const cityChange = (val) => {
            emit('input', val);
        };

        return {
            innerValue,
            optionsList,
            getCityList,
            cityChange,

        };
    },
});

</script>

父组件

<template>
    <div>
        <citySelect
            v-model="cityValue"
            :placeholder="'请选择城市'"
            :multiple="multiple"
            :is-all-select="true"
        />
    </div>
</template>


//导入
import citySelect from '../components/citySelect';

components: { citySelect },


setup() {
        // 单选这样传,  数据回显
        // const cityValue = ref(1);
        // const multiple = ref(false);

        // 多选这样传,  数据回显
        const multiple = ref(true);
        const cityValue = ref([1, 2]);

        return {
            multiple,
            cityValue,
        };
    },