el-select下拉框同时传两个甚至更多值给后端_el-select怎么给后端返回数据

有时候因为后端需要，前端在下拉框选中值的需要同时将id和value一起传给后端，以下一个虽然有点笨但是管用又简单的方法，可以供各位小白参考

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34