Vue+elementPlus实现给select选项值动态从后台获取，同时将选中值的ID通过查询按钮传给后台

在Vue中结合element-plus实现select选项值的动态获取及选中值的传递，可以通过以下步骤实现：

1. 定义数据结构，包括select选项的数据源和选中的值。
2. 使用<el-select>组件来渲染下拉菜单，并使用v-model进行数据双向绑定。
3. 使用<el-option>组件来渲染每一个选项。
4. 通过API调用获取后端数据，并将其赋值给数据源。
5. 使用按钮触发事件，将选中值发送到后端。

以下是具体的实现代码：

<template>
  <div>
    <el-select v-model="selectedValue" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button @click="sendValueToBackend">查询</el-button>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
 
export default {
  setup() {
    const selectedValue = ref(null);
    const options = ref([]);
 
    // 模拟从后端获取数据的函数
    const fetchData = async () => {
      // 这里应该是API请求获取数据
      const mockData = [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        // ...更多选项
      ];
      options.value = mockData;
    };
 
    // 发送选中值到后端的函数
    const sendValueToBackend = () => {
      ElMessageBox.alert(`选中的值的ID是: ${selectedValue.value}`, '查询结果');
      // 实际项目中，这里应该是发送请求到后端的代码
    };
 
    // 在组件挂载后获取数据
    onMounted(fetchData);
 
    return {
      selectedValue,
      options,
      sendValueToBackend,
    };
  },
};
</script>

在这个例子中，我们使用了ref来定义响应式数据，onMounted生命周期钩子来在组件加载完成后获取数据，并通过模拟函数fetchData来替代实际的API请求。选中的值通过按钮点击事件sendValueToBackend发送到后端，这里使用了ElMessageBox来模拟一个对话框展示结果。在实际应用中，你需要替换这些模拟函数，以实现真正的数据获取和发送逻辑。