ant design vue中点击编辑,表单数据的绑定

在一般的表单中,都是使用v-model来双向绑定数据,但是ant design vue中则会给予警告

1,获取数据:

 getNews({
          params: {
            Id: i   //传进来的id等值,具体看后端要什么
          }
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            this.form.setFieldsValue({
              title: res.data.title,
              introduce: res.data.introduce
            })
          }
        })

2.布局

 <a-form :form="form" @submit="handleOk" >
         <a-form-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              v-decorator="[‘linkphone‘, {rules: [{pattern:new RegExp(/^1[3|4|5|6|7|8|9]\d{9}$/,‘g‘),message: ‘请输入正确的手机号码‘},{required: true, message: ‘请输入联系人电话‘}]}]"
              placeholder="请输入联系人电话"
            />
          </a-form-item>
 <a-form >
<-此处可以添加正则验证->

3.提交数据

 handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log(values)
          editNews({
            action: ‘update‘,
            title: values.title,
            introduce: values.introduce
          }).then(res => {
            console.log(res)
            if (res.code == 0) {
              this.$message.success(‘当前已经成功修改/修改‘)
              this.getNewslist()
            }
          })

      })
    }

以上就是from表单中绑定和提交数据

原文地址:https://www.cnblogs.com/bingchenzhilu/p/11951806.html

时间: 2024-10-08 01:48:37

ant design vue中点击编辑,表单数据的绑定的相关文章

vue中点击空白处隐藏弹框(用指令优雅地实现)

在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div> </template> <script> cons

Ant Design Vue项目解析-前言

源码系列文章很长时间没有更新,一是在考虑文章用什么方式写质量会更高,用什么方式总结更易于扩展和总结知识点,加上工作.看书.健身占用的时间比较多所以也没时间去整理.最近在网上看到一篇文章感觉这种方式不错,刚好ant Desgin of vue发布,就想试试用这种方式写文章,而且通过画思维导图来整理整个知识点: 还没有整理完,里面经常会有打问号的解释是因为要看到后面才能知道这个组件的用途.后续会将其补充完整.还想记录下我在不熟悉源码结构下怎么牵出一个线头顺藤摸瓜的属性整个项目. 把ant Desgi

vue中点击显示不同的状态

<template> <div> <div @click="choosetype" class="searchbox"> <span :class="curtype==1?'active':''" data-i="1">热销专区</span> <span :class="curtype==2?'active':''" data-i="

ant design vue table组件一列渲染多个参数

如下效果图,开始时间,结束时间为两个字段 代码: const columns = [ { title: '起止时间', customRender: (text, record) => { const time = `${record.dateFrom}-${record.dateTo}`;//es6写法 const time = '${record.dateFrom}' + '-' + ${record.dateTo}';//es5写法 return time; },}] 原文地址:https:

Vue中点击按钮回到顶部(滚动效果)

页面滚动到一定位置时,出现回到顶部按钮 代码如下 HTML <div class="footer"> <div class="gotop" v-show="gotop" @click="toTop">Top</div> </div> CSS .footer .gotop { text-align: center; position: fixed; right: 50px; bot

2017.04 vue学习笔记---08表单控件绑定---基础用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin-bottom: 30px; } </style> <script src="js/vue.js"></script> <

2017.04 vue学习笔记---08表单控件绑定---基础用绑定value

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin-bottom: 30px; } </style> <script src="js/vue.js"></script> <

SpringMVC 接收表单数据、数据绑定

接收表单数据有3种方式. 1.使用简单类型接收表单数据(绑定简单数据类型) 表单: <form action="${pageContext.request.contextPath}/userController/handler" method="post"> 用户名:<input name="username" type="text" /><br /> 密码:<input name=&

ant design form表单的时间处理

ant design form表单的时间处理 用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢?可以在表单中使用如下代码: import { DatePicker } from 'antd' import Moment from 'moment' <FormItem label="开始时间" {...formItemLayout}> { getFieldDecorator('sdate', { initialValue: item.sdate