el-select多选后如何调整顺序

`el-select` 是 Element UI 中的一个组件，用于实现下拉选择框的功能。在 Element UI 的使用过程中，如果你需要实现 `el-select` 的多选并且调整选择项的顺序，可以通过监听 `el-select` 的 `change` 事件来获取当前选中的值数组，然后根据需要重新排序这个数组，最后将排序后的数组设置到相应的数据绑定变量中。

以下是一个调整顺序的基本示例：

// 假设有一个多选的 el-select 组件，绑定的数据是 selectedValues，选项列表是 options
<el-select v-model="selectedValues" multiple>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

// Vue 实例中的数据
data() {
  return {
    selectedValues: [], // 存储选中的值
    options: [
      { value: '选项1', label: '黄金糕' },
      { value: '选项2', label: '双皮奶' },
      { value: '选项3', label: '蚵仔煎' },
      // ... 其他选项
    ]
  };
},
methods: {
  // change 事件的处理函数
  handleSelectChange(value) {
    // 从 options 中根据 value 获取到对应的对象，然后根据 label 对象数组进行排序
    const sortedOptions = this.options.filter(item => value.includes(item.value)).sort((a, b) => {
      return a.label.localeCompare(b.label);
    });

    // 将排序后的对象数组中的 value 组合成一个新的数组
    const sortedValues = sortedOptions.map(item => item.value);

    // 更新 selectedValues 的值
    this.selectedValues = sortedValues;
  }
}

在这个示例中，`handleSelectChange` 方法会在 `el-select` 的选中项发生变化时被调用，它首先过滤出当前选中的选项，然后根据 `label` 的文本内容对这些选中项进行排序，最后将排序后的值数组赋值给 `selectedValues`。