ant desigin vue 实现下拉选择多选带选中之后禁用功能

在Ant Design Vue中，要实现下拉选择多选并带有选中后禁用的功能，可以使用`a-select`组件结合`a-tag`组件。具体步骤如下：

1. 首先确保已经安装了Ant Design Vue库，如果没有安装，可以使用以下命令进行安装：

npm install ant-design-vue --save

2. 在你的Vue项目中引入Ant Design Vue的样式和组件：

import Vue from 'vue';
import { Select, Tag } from 'ant-design-vue';

Vue.use(Select);
Vue.use(Tag);

3. 在你的Vue组件中使用`a-select`和`a-tag`组件实现下拉选择多选并带有选中后禁用的功能：

<template>
  <div>
    <a-select v-model="selectedValues" mode="multiple">
      <a-select-option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.label }}
      </a-select-option>
    </a-select>
    <div class="selected-tags">
      <a-tag v-for="value in selectedValues" :key="value" closable @close="handleClose(value)">
        {{ getLabelByValue(value) }}
      </a-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
      ],
      selectedValues: [],
    };
  },
  methods: {
    handleClose(value) {
      this.selectedValues = this.selectedValues.filter((v) => v !== value);
    },
    getLabelByValue(value) {
      return this.options.find((item) => item.value === value).label;
    },
  },
};
</script>

<style scoped>
.selected-tags {
  margin-top: 10px;
}
</style>

在这个示例中，我们使用了`a-select`组件来实现多选下拉框，并通过`v-model`绑定了`selectedValues`数组来存储选中的值。当用户选择一个选项时，它的值会被添加到`selectedValues`数组中。我们还使用了`a-tag`组件来显示已选中的选项，并为每个标签添加了关闭按钮。当点击关闭按钮时，会触发`handleClose`方法，将对应的值从`selectedValues`数组中移除。这样就实现了选中后禁用的功能。