element-ui组合输入框的数据是如何处理的

你是否遇到这样的需求

实现的功能就是，当我们选择输入完成后，点击查询时，把数据传到后台。

是不是感觉需求也不是很复杂呀，错！大错特错！
因为select本身带有自己的事件

显然，这些个步骤都需要放在表单里，把表单作为一个响应式的数据，实时变化。

在事件里面我开始做的处理就是选择一被触发，先把选择到的value作为表单数据的一个键，然后把后面输入框的数据作为value的值。
问题出现：每当触发赋值后，却发现传过去的竟然是undefined！因为选择器是在输入框的数据变化前把数据赋给对应的字段，那时输入框没有数据，自然也就是undefined。
第二次尝试：直接在表单中，把选择项对应的字段定义好，并且输入框的数据也用一个字段直接接收，在选择触发后，直接赋值。
问题来了：我到底该怎么把数据的值赋给选择项的字段呢？
我尝试了两种方案：

①this.$set(表单名，属性名，属性值)

因为select的change事件里面有自带的value，所以this.$set(this.form，value，this.form.数据的字段名）

②this.form=JSON.parse(JSON.stringify(json).replace(/需要替换的属性名/g,新的属性名));

无一例外，这两种方案都不可行，别问我为什么这样做，我承认我病急乱投医了，逮啥用啥！
经历过一上午的抓耳挠腮，终于！茅塞顿开，不到10分钟就把这个问题解决了。
第一步：在form中设置选择项的字段名

  schoolSerialCode:'',//校方流水号
  bankSerialCode:'',  //银行流水号

第二步：html部分也要做一些处理

		  <span class="add-item">流水号：</span>
          <a-select
            style="width: 120px"
            @change="handleChange"
            default-value="schoolSerialCode"
          >
            <a-select-option value="schoolSerialCode">
              校方流水号
            </a-select-option>
            <a-select-option value="bankSerialCode">
              银行流水号
            </a-select-option>
          </a-select>
          <a-input
            style="width: 50%"
            placeholder="请输入校方流水号"
            v-if="serialCode == 'schoolSerialCode'"
            v-model="form.schoolSerialCode"
          />
          <a-input
            style="width: 50%"
            placeholder="请输入银行流水号"
            v-else
            v-model="form.bankSerialCode"
          />

第三步：data里面设置一个用于判断的字段，并给默认值

serialCode: "schoolSerialCode",

第四步：事件处理部分

    // 流水号的选择
    handleChange(value) {
      this.serialCode = value;
    },

回顾一下，感觉自己写的好复杂

标签：form,输入框,value,element,流水号,ui,表单,数据
来源： https://blog.csdn.net/yolo_link/article/details/122362192