el-select ドロップダウン ボックスは、2 つ以上の値を同時にバックエンドに送信します。

バックエンドのニーズにより、ドロップダウン ボックスで値を選択するときに、フロントエンドが ID と値を同時にバックエンドに渡す必要がある場合があります。次の方法は少し愚かですが、効果的でシンプルです。すべての初心者の参考として使用してください。

/*
需求：选中下拉框值的时候同时将id和选中值传给后端
**/
// 表单
<el-form :model="form"  inline >
  <el-form-item label="字段N" prop="selectContent">
    <el-select v-model="form.selectNode" value-key="id" placeholder="请选择字段" clearable>
       <el-option v-for="item in selectInfo" :label="item.value" :key="item" :value="item" />
    </el-select>
  </el-form-item>
</el-form>
--------------------------------------------------------------------------------
// 表单参数
const form = reactive({
    
    
  selectNode: null, 
  selectContent: null, 
})
// 下拉框的值，此处的值通过接口返回，调接口拿到值直接赋值就行
const selectInfo = ref(null)

// 查询
const query = () => {
    
    
  let queryParams = {
    
    
    ...form, // 解构form中的参数
    // v-model绑定的是value的值，value是选中的值，现在表单绑的value是整个item，
    // 也就是接口返回的所有数据，我们直接在selectNode取后端要的值直接传过去就行
    id: form.selectNode?.id,  
    selectContent: form.selectNode?.selectContent,
  }
     // 此处就可以直接删掉参数中的selectNode即可，不改变form的东西，改变我们传的参数即可
  delete queryParams.selectNode;
  getList(queryParams);  // 这里就是你接口的方法，直接把参数传过去就行了
}