表单参数绑定(如何解决一个输入框绑定两个参数)

表单参数绑定(如何解决一个输入框绑定两个参数)

问题复现

       <el-form-item label="会议编号" prop="meetingNum">
          <el-select v-model="form.meetingNum" placeholder="请选择会议编号" style="width: 100%;"
                     :disabled="form.electricalNum ? false : true">
            <el-option v-for="item in meetingNumList" :key="item.id" :label="item.consultationCode"
                       :value="item.consultationCode">
            </el-option>
          </el-select>
        </el-form-item>

现在我想绑定两个参数，form.meetingNum绑定id，还有一个form.userId绑定userId，怎么办呢？

问题解决

如果想将form.meetingNum绑定到id，并将form.userId绑定到userId，你可以通过修改el-option元素的value属性来实现这一点。具体来说，你可以将form.meetingNum的值设置为对象，其中包含id和userId属性。下面是一个示例：

<el-form-item label="会议编号" prop="meetingNum">
  <el-select v-model="form.meetingNum" placeholder="请选择会议编号" style="width: 100%;"
    :disabled="form.electricalNum ? false : true">
    <el-option v-for="item in meetingNumList" :key="item.id" :label="item.consultationCode"
      :value="{ id: item.id, userId: item.userId }">
    </el-option>
  </el-select>
</el-form-item>

在这个例子中，form.meetingNum将成为一个包含id和userId属性的对象。然后，你可以通过form.meetingNum.id和form.meetingNum.userId来访问这两个值。

确保在处理提交表单或其他操作时，你了解form.meetingNum的结构，以便正确处理id和userId。

但是，我不满意，我不想这样子来回换参数，那么，就稍微改变一下啦！

方案优化

另一种方法是使用计算属性（computed property）来处理这两个值的绑定。你可以在计算属性中将form.meetingNum拆分为id和userId。以下是一个例子：

<template>
  <el-form>
    <el-form-item label="会议编号" prop="meetingNum">
      <el-select v-model="selectedMeeting" placeholder="请选择会议编号" style="width: 100%;">
        <el-option v-for="item in meetingNumList" :key="item.id" :label="item.consultationCode" :value="item">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      form: {
     
        userId: null, // Initialize userId with a default value if needed
      },
      meetingNumList: [
        // Your meeting number data here
      ],
    };
  },
  computed: {
     
    selectedMeeting: {
     
      get() {
     
        return this.form.meetingNum;
      },
      set(value) {
     
        this.form.meetingNum = value.id;
        this.form.userId = value.userId;
      },
    },
  },
};
</script>

在这个例子中，我们使用了计算属性selectedMeeting来处理form.meetingNum的获取和设置。当选择了一个会议编号时，set方法会将其拆分为id和userId，并分别设置到form.meetingNum和form.userId中。这样，你可以维护一个更简洁的表单数据结构。

问题总结

当你想要将一个表单项（如form.meetingNum）与多个值关联时，有两种常见的方法：

1. 使用对象作为值：

   • 在el-option的value属性中，将form.meetingNum设置为一个对象，该对象包含需要关联的多个值，比如id和userId。
   • 在后续代码中，通过form.meetingNum.id和form.meetingNum.userId来访问这两个值。

   <el-option v-for="item in meetingNumList" :key="item.id" :label="item.consultationCode" :value="{ id: item.id, userId: item.userId }">
   </el-option>
   

2. 使用计算属性进行处理：

   • 使用计算属性，将form.meetingNum拆分为id和userId。
   • 在el-select中，使用v-model绑定计算属性，使其更容易处理多个关联值。

   <el-select v-model="selectedMeeting" placeholder="请选择会议编号" style="width: 100%;">
     <el-option v-for="item in meetingNumList" :key="item.id" :label="item.consultationCode" :value="item">
     </el-option>
   </el-select>
   

   computed: {
        
     selectedMeeting: {
        
       get() {
        
         return this.form.meetingNum;
       },
       set(value) {
        
         this.form.meetingNum = value.id;
         this.form.userId = value.userId;
       },
     },
   },
   

选择哪种方法取决于你的偏好和代码的结构。第一种方法直接在el-option中处理值的结构，而第二种方法通过计算属性提供更灵活的处理方式，使得在后续的逻辑中可以更容易地操作这些值。