多选下拉框选中选项隐藏

需求：

当多选下拉框的选项较多时，为了防止用户重复点击已选中的选项将其取消选中(误触)，需要让用户在选中选项后让选项消失，用户取消选中选项显示。

思路：

要让用户选中的选项消失，首先我们要知道用户选中了什么选项，然后在下拉框的所有选项中过滤掉用户选择的选项即可。

 <a-select
                mode="multiple"
                v-model="storageForm.tankName"
                class="query-input"
                @change="handleChange"
                placeholder="请选择储罐号">
              <a-select-option v-for="item in this.filteredOptions " :key="item" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>

//1.用户选中的选项
handleChange(selectedItems) {
      this.storageForm.tankName = selectedItems;
    },

//2.计算属性监听下拉框数据源的变化
computed: {
    filteredOptions() {
      return this.tankNameList?.filter(o => !this.storageForm.tankName?.includes(o));
    },
  },

效果：