美文网首页
ant design vue form 表单 number类型验

ant design vue form 表单 number类型验

作者: 安全的小飞飞 | 来源:发表于2020-03-17 15:14 被阅读0次

1、代码

 <a-form-item label="ID" :labelCol="{lg: {span: 7}}" :wrapperCol="{lg: {span: 10} }">
          <a-input type="number" v-decorator="['id',{rules:[{required:true,type:'number'}]}]" placeholder="请输入ID"/></a-form-item>

结果一直提示:


image.png

2、解决办法:
在网上找了一直快捷的办法:
修改代码如下:

<a-input type="number" v-decorator="
['id',{rules:[{required:true,type:'number',
transform(value){return Number(value)}}]}]" placeholder="请输入ID"/>

但是这个只能跳过验证。提交的时候还是string。

在提交验证通过后,把属性改为number。

 handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
           //此处改为number类型
          values.id = Number(values.id)
          add(values).then(res => {
            if (res.code !== 1) {
              this.$message.error('失败', 5)
            } else {
              this.$message.success('成功', 5)
              this.form.resetFields()
              this.modal1 = false
              this.$refs.table.refresh(true)
            }
          })
        }
      })
    },

就能成功提交了。

相关文章

网友评论

      本文标题:ant design vue form 表单 number类型验

      本文链接:https://www.haomeiwen.com/subject/ngytyhtx.html