ant-design-vue/components/select/demo/hide-selected.vue

36 lines
718 B
Vue

<docs>
---
order: 12
title:
zh-CN: ้š่—ๅทฒ้€‰ๆ‹ฉ้€‰้กน
en-US: Hide Already Selected
---
## zh-CN
้š่—ไธ‹ๆ‹‰ๅˆ—่กจไธญๅทฒ้€‰ๆ‹ฉ็š„้€‰้กนใ€‚
## en-US
Hide already selected options in the dropdown.
</docs>
<template>
<a-select
v-model:value="selectedItems"
mode="multiple"
placeholder="Inserted are removed"
style="width: 100%"
:options="filteredOptions.map(item => ({ value: item }))"
></a-select>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
const selectedItems = ref<string[]>([]);
const filteredOptions = computed(() => OPTIONS.filter(o => !selectedItems.value.includes(o)));
</script>