80 lines
1.5 KiB
Vue
80 lines
1.5 KiB
Vue
<!--
|
|
* @Author: RenXiaoDong
|
|
* @Date: 2025-06-25 14:02:40
|
|
-->
|
|
<template>
|
|
<Select
|
|
v-model:value="selectedValues"
|
|
:mode="multiple ? 'multiple' : undefined"
|
|
size="middle"
|
|
:placeholder="placeholder"
|
|
:allowClear="allClear"
|
|
:showSearch="allowSearch"
|
|
showArrow
|
|
:maxTagCount="maxTagCount"
|
|
@change="handleChange"
|
|
>
|
|
<Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
|
|
{{ item.name }}
|
|
</Option>
|
|
</Select>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Select } from 'ant-design-vue';
|
|
const { Option } = Select;
|
|
import { ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [Array, String, Number],
|
|
default: () => [],
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '全部',
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
maxTagCount: {
|
|
type: Number,
|
|
default: 3,
|
|
},
|
|
allClear: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
allowSearch: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(['update:modelValue', 'change']);
|
|
|
|
const selectedValues = ref(props.multiple ? [] : '');
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(newVal) => {
|
|
selectedValues.value = newVal;
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
watch(selectedValues, (newVal) => {
|
|
emits('update:modelValue', newVal);
|
|
});
|
|
|
|
const handleChange = (value) => {
|
|
selectedValues.value = value;
|
|
emits('change', value);
|
|
};
|
|
</script>
|