美文网首页
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