element ui select选择器，如何选中实时排序，把选中的往前排

Element UI 是一个基于 Vue 2.0 的桌面端组件库，它提供了丰富的组件以构建用户界面。其中，Select 下拉选择器组件允许用户从一组选项中选择一个或多个选项。如果你想要实现一个选择器，并且选中的项能够实时排序到选项列表的最前面，你需要使用 Element UI 的 select 组件，并结合一些自定义逻辑来实现这个功能。

以下是一个基本的思路和步骤：

1. 初始化 select 组件，定义好你的选项列表和绑定的数据。
2. 当用户选择某个选项时，你需要监听这个选择事件。
3. 在选择事件的回调函数中，找到被选中的项，并将其从原数组中移除，然后将其添加到数组的开始位置。
4. 更新绑定到 select 组件的数据，使其重新渲染，新的数组顺序会显示在下拉列表中。

这里是一个简单的示例代码：

<template>
  <el-select v-model="value" @change="handleChange">
    <el-option
      v-for="item in sortedOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      originalOptions: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        // 更多选项...
      ],
      value: '' // 用于绑定选中项的值
    };
  },
  computed: {
    sortedOptions() {
      // 将选中的项排在最前面
      const selectedOption = this.originalOptions.find(o => o.value === this.value);
      if (selectedOption) {
        return [selectedOption, ...this.originalOptions.filter(o => o !== selectedOption)];
      }
      return this.originalOptions;
    }
  },
  methods: {
    handleChange(value) {
      // 当选中值改变时，重新排序选项
      this.$nextTick(() => {
        // 更新数据源，保持选项顺序
        this.originalOptions = this.sortedOptions;
      });
    }
  }
};
</script>

在这个例子中，我们使用了 Vue 的计算属性来维护一个排序后的选项列表 `sortedOptions`。当用户改变选择时，`handleChange` 方法会被触发，它会将选中的项移动到原数组的开头，然后更新 `originalOptions` 数组以确保下一次渲染时选项列表的顺序是正确的。