Vue+elementUI实现下拉框多选和反选

在Vue中结合Element UI实现下拉框多选和反选的功能，可以使用el-select组件的multiple属性来启用多选，并通过v-model双向绑定数据来更新选中项。

以下是一个简单的示例：

<template>
  <div>
    <!-- 多选下拉框 -->
    <el-select
      v-model="selectedOptions"
      multiple
      placeholder="请选择"
      @change="handleSelectChange"
    >
      <!-- 循环渲染选项 -->
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
 
    <!-- 反选按钮 -->
    <el-button @click="invertSelection">反选</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 选中的选项
      selectedOptions: [],
      // 下拉框的所有选项
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        // ...更多选项
      ],
    };
  },
  methods: {
    // 处理选择变化
    handleSelectChange(value) {
      console.log('当前选中的值：', value);
    },
    // 反选
    invertSelection() {
      // 获取所有选项的值
      const allValues = this.options.map(item => item.value);
      // 进行反选操作
      this.selectedOptions = allValues.filter(
        value => !this.selectedOptions.includes(value)
      );
    },
  },
};
</script>

在这个示例中，selectedOptions数组用于保存当前选中的值。el-select组件通过v-model绑定selectedOptions，实现多选功能。当用户选择选项时，handleSelectChange方法会被调用，并输出当前选中的值。

反选按钮绑定了invertSelection方法，当用户点击时，会将所有未选中的选项选中，或者将所有选中的选项移除。这样就实现了下拉框的多选和反选功能。