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

904 B

#### 隐藏已选择选项 隐藏下拉列表中已选择的选项。 #### Hide Already Selected Hide already selected options in the dropdown.
<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>
  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>