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

46 lines
904 B
Markdown
Raw Normal View History

<cn>
#### 隐藏已选择选项
隐藏下拉列表中已选择的选项。
</cn>
<us>
#### Hide Already Selected
Hide already selected options in the dropdown.
</us>
2019-10-09 10:32:23 +00:00
```tpl
<template>
<a-select
mode="multiple"
placeholder="Inserted are removed"
:value="selectedItems"
@change="handleChange"
style="width: 100%"
>
<a-select-option v-for="item in filteredOptions" :key="item" :value="item">
{{item}}
</a-select-option>
</a-select>
</template>
<script>
2019-09-28 12:45:07 +00:00
const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
export default {
data() {
return {
selectedItems: [],
};
},
computed: {
filteredOptions() {
return OPTIONS.filter(o => !this.selectedItems.includes(o));
},
},
methods: {
handleChange(selectedItems) {
this.selectedItems = selectedItems;
},
},
};
</script>
```