标签：form 输入框 value 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。