VueX+Element Plus下拉菜单多选后，下拉菜单里能够回显选择的数据

在 VueX 中，可以通过 mutations 来修改 store 中的数据，从而实现下拉菜单选中数据的回显。

具体实现步骤如下：

1. 在 store 中定义一个名为 `selectedOptions` 的数组变量，用于存储选中的数据。

2. 在 mutations 中定义一个名为 `addSelectedOption` 的方法，用于将选中的数据添加到 `selectedOptions` 数组中。

3. 在 mutations 中定义一个名为 `removeSelectedOption` 的方法，用于将取消选中的数据从 `selectedOptions` 数组中移除。

4. 在下拉菜单组件中，通过 `v-model` 绑定 `selectedOptions` 数组，并在 `change` 事件中触发 mutations 中的 `addSelectedOption` 和 `removeSelectedOption` 方法。

5. 在下拉菜单组件中，通过 `v-bind:selected` 绑定一个计算属性，判断该选项是否被选中，从而在下拉菜单中显示选中的数据。

示例代码如下：

store.js：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    selectedOptions: [],
  },
  mutations: {
    addSelectedOption(state, option) {
      state.selectedOptions.push(option);
    },
    removeSelectedOption(state, option) {
      const index = state.selectedOptions.indexOf(option);
      if (index !== -1) {
        state.selectedOptions.splice(index, 1);
      }
    },
  },
});

export default store;

下拉菜单组件：

<template>
  <el-select v-model="selectedOptions" multiple @change="handleChange">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" :selected="isSelected(option)">
    </el-option>
  </el-select>
</template>

<script>
import { computed } from 'vue';
import { mapMutations } from 'vuex';

export default {
  computed: {
    ...mapMutations(['addSelectedOption', 'removeSelectedOption']),
    selectedOptions: {
      get() {
        return this.$store.state.selectedOptions;
      },
      set(value) {
        this.$store.state.selectedOptions = value;
      },
    },
    options() {
      return [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
        { value: 'option4', label: '选项4' },
      ];
    },
    isSelected() {
      return (option) => {
        return this.selectedOptions.includes(option.value);
      };
    },
  },
  methods: {
    handleChange(value) {
      const selected = value[value.length - 1];
      const isSelected = this.selectedOptions.includes(selected);
      if (isSelected) {
        this.removeSelectedOption(selected);
      } else {
        this.addSelectedOption(selected);
      }
    },
  },
};
</script>

在上面的例子中，通过 `mapMutations` 将 mutations 中的 `addSelectedOption` 和 `removeSelectedOption` 方法映射到组件中。在 `selectedOptions` 计算属性中，使用 `get` 和 `set` 方法来获取和设置 store 中的 `selectedOptions` 数组。

在 `isSelected` 计算属性中，定义了一个箭头函数，用于判断选项是否被选中。在 `el-option` 组件中，通过 `v-bind:selected` 绑定该计算属性，从而实现下拉菜单中选中数据的回显。在 `change` 事件中，根据选中和取消选中的情况，分别触发 mutations 中的方法，修改 store 中的数据。