iview表单校验，输入框有值校验失败

问题

当做表单校验时，输入框回显了后端返回的值，但是点击确认按钮时，却校验失败，提示当前项不能为空。

分析：

由于后端返回的是number类型，而其前端却使用的是普通输入框，所以导致类型不匹配。普通输入框即使我们输入的是数字，打印出来的值也会是字符串，这就说明了，普通输入框不可能会输出数字，但是回显是又是数字，好了，类型不匹配，验证自然不通过。

解决

1. 让类似保持一致，可以把普通输入框改成数字输入框，并确保后台返回的类似也是数字。
2. 也可以继续使用普通输入框，然后在获取后台对应的值的时候，将number转换为字符串。

代码

<template>
    <Form ref="form" inline :model="form" :label-width="120" :rules="rules">
      <FormItem label="汇款金额" prop="money">
        <Input v-model="form.money"></Input>
      </FormItem>
    </Form>
</template>

<script>
import {
    
     merchantRecharge, selectBankConfig } from '@/api/costManagement'
import upload from '@/components/uploadLimit'

export default {
    
    

  props: {
    
    
    changeRow: {
    
    
      type: Object,
      default: () => {
    
    }
    }
  },

  data() {
    
    
    return {
    
    
      form: {
    
    
        money: '',
        paymentNo: '',
        merchantName: '',
        voucherImg: ''
      },
      rules: {
    
    
        money: {
    
     required: true, message: '请输入汇款金额', trigger: 'blur' },
      },
      loading: false
    }
  },
  watch: {
    
    
    changeRow: {
    
    
      handler(newVal, oldVal) {
    
    
        this.form = JSON.parse(JSON.stringify(newVal))
        //后台返回的这个字段为number类型，例如后台返回了数字1212，所以这里修改类型，确保通过校验
        this.form.money = this.form.money + '' 
      },
      deep: true,
      immediate: true
    }
  },