ant desigin vue 实现下拉选择 多选 并且选中之后禁用下拉框里选中的数据 并支持回显

要实现在Ant Design Vue的Select组件中实现多选功能，同时在用户已经选择了某些选项后禁用这些选项并允许回显选中的项目，你可以按照以下步骤操作：

1. **初始化组件**:
使用`<a-select multiple>`标签来创建一个多选下拉框。

2. **设置数据源**:
获取所有可选的选项，包括那些不能再次选择的选项。例如：

   <a-select :options="allOptions" v-model="selectedValues">
     <!-- 通过v-model双向绑定已选值 -->
   </a-select>

`allOptions`是一个数组，包含了所有可选的option，其中包含`hidden`字段来标记哪些选项应该隐藏。

3. **配置选项的disabled状态**:
根据`selectedValues`里的值，设置每个option的`disabled`属性。如果某个选项在已选值中，则设置其为`true`，使其不可选择：

   computed: {
      filteredOptions() {
        return this.allOptions.map(option => ({
          ...option,
          disabled: this.selectedValues.includes(option.value) // 假设value是每个option的主要标识
        }));
      }
   },

4. **回显已选项目的名称**:
为了回显选中的项目名称，可以在`filteredOptions`中只展示名称而不是整个option。这可以通过修改映射函数完成：

   filteredOptions() {
     return this.selectedValues.map(selectedValue => {
       const option = this.allOptions.find(option => option.value === selectedValue);
       if (option.hidden) return null;
       return { label: option.label, value: selectedValue };
     }).filter(Boolean); // 过滤掉null值
   }

这样，当你从下拉框中选择一个选项时，它会被添加到`selectedValues`中，并且在下拉列表中被禁用。同时，回显的将是选中的项目的名称，而不会显示那些不可选择的隐藏选项。