使用el-select实现

El-Select 是基于 Element UI 的下拉框组件，可以方便地实现下拉选项的排序。是一个示例代码：

<template  <div>
    <el-select v-model="Option" placeholder="请选择">
      <el-option
        v-for="(option, index) in options"
        :key="index"
        :label="option.label"
        :value="option.value"
      ></el-option>
    </el-select>
    <el-button @click="moveUp">上移</el-button>
    <el-button @click="moveDown">下移</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        { label: '选项4', value: 'option4' }
      ]
    }
  },
  methods: {
    moveUp() {
      const index = this.options.findIndex(option => option.value === this.selectedOption)
      if (index > 0) {
        this.options.splice(index - 1, 2, this.options[index], this.options[index - 1])
        this.selectedOption = this.options[index - 1].value
      }
    },
    moveDown() {
      const index = this.options.findIndex(option => option.value === this.selectedOption)
      if (index < this.options.length - 1) {
        this.options.splice(index, 2, this.options[index + 1], this.options[index])
        this.selectedOption = this.options[index + 1].value
      }
    }
  }
}
</script>

在这个实现中，我们使用了 Element UI 的 el-select 组件和 el-option 组件来渲染下拉选项。我们还添加了两个按钮来实现选项的上移和下移操作。在 JavaScript 中，我们定义了两个方法 moveUp 和 moveDown 来处理选项的排序。这些方法使用 findIndex 方法查找当前选中的选项在选项数组中的索引，然后使用 splice 方法来重新排列选项的顺序。最后，我们更新了 selectedOption 的值以反映新的选项顺序。

您可以根据需要修改此示例来适应您的应用程序的特定要求。注意，如果您在使用 Element UI 时遇到问题，请参阅 Element UI 的文档或寻求社区支持。