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

2023-12-13 20:46:00

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

在这里插入图片描述

问题复现

       <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的值设置为对象,其中包含iduserId属性。下面是一个示例:

<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将成为一个包含iduserId属性的对象。然后,你可以通过form.meetingNum.idform.meetingNum.userId来访问这两个值。

确保在处理提交表单或其他操作时,你了解form.meetingNum的结构,以便正确处理iduserId

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

方案优化

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

<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方法会将其拆分为iduserId,并分别设置到form.meetingNumform.userId中。这样,你可以维护一个更简洁的表单数据结构。

问题总结

当你想要将一个表单项(如form.meetingNum)与多个值关联时,有两种常见的方法:

  1. 使用对象作为值

    • el-optionvalue属性中,将form.meetingNum设置为一个对象,该对象包含需要关联的多个值,比如iduserId
    • 在后续代码中,通过form.meetingNum.idform.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拆分为iduserId
    • 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中处理值的结构,而第二种方法通过计算属性提供更灵活的处理方式,使得在后续的逻辑中可以更容易地操作这些值。

文章来源:https://blog.csdn.net/weixin_53742691/article/details/134970965
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。