The el-select drop-down box transmits two or more values to the backend at the same time

Sometimes due to the needs of the backend, the frontend needs to pass the id and value to the backend at the same time when selecting a value in the drop-down box. The following method is a bit stupid but effective and simple, and can be used as a reference for all newbies.

/*
需求：选中下拉框值的时候同时将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);  // 这里就是你接口的方法，直接把参数传过去就行了
}