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

news2024/10/7 15:25:28

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

在这里插入图片描述

问题复现

       <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）与多个值关联时，有两种常见的方法：

使用对象作为值：
- 在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>
```

使用计算属性进行处理：

使用计算属性，将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;
    },
  },
},