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);  // 这里就是你接口的方法,直接把参数传过去就行了
}

你可能感兴趣的:(前端学习,新手村,前端,javascript)