2019-01-05 08:22:25 +00:00
|
|
|
<cn>
|
|
|
|
#### 隐藏已选择选项
|
|
|
|
隐藏下拉列表中已选择的选项。
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
<us>
|
|
|
|
#### Hide Already Selected
|
|
|
|
Hide already selected options in the dropdown.
|
|
|
|
</us>
|
|
|
|
|
2019-10-09 10:32:23 +00:00
|
|
|
```tpl
|
2019-01-05 08:22:25 +00:00
|
|
|
<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;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2019-01-05 08:22:25 +00:00
|
|
|
</script>
|
|
|
|
```
|