ant design vue的form表单取值方法


Posted in Vue.js onJune 01, 2022

ant design vue的form表单取值

官方中有以下两种取值方式

ant design vue的form表单取值方法

 因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的

ant design vue的form表单取值方法

 然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下:

ant design vue的form表单取值方法

ant design of vue 学习之表单form

v-decorator(表单验证,内置绑定,初始值)

1、可通过 v-decorator 进行表单验证

//内置验证规则
<a-form-item label="课程名称"
             v-bind="formItemLayout">
   <a-input placeholder="课程名称"
            v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项,最大50字符' }] }]" />
</a-form-item>
//自定义验证规则01
<a-form-item>
  <a-input size="large"
           type="text"
           placeholder="手机号"
           v-decorator="['mobileNumber', 
           {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
    <a-icon slot="prefix"
            type="mobile"
            :style="{ color: 'rgba(0,0,0,.25)' }" />
  </a-input>
</a-form-item>
//自定义验证规则02
<a-form-item   v-bind="formItemLayout"
               label="手机号码">
     <a-input placeholder="手机号码"
              v-decorator="['mobileNumber',{rules: [{ required: true,max:11,message:'请输入正确格式的手机号码',validator:MobileNumberValidator}]}]" />
</a-form-item>
//在methods中设定方法
// 手机号验证
MobileNumberValidator (rule, value, callback) {
  const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/
  if (!idcardReg.test(value)) {
    // eslint-disable-next-line standard/no-callback-literal
    callback('非法格式')
  }
  // Note: 必须总是返回一个 callback,否则 validateFieldsAndScroll 无法响应
  callback()
}

2、可通过 v-decorator 进行内置的双向绑定(详情可看下文的数据获取与填充)

数据填充(所有项)   this.form.setFieldsValue(data)
数据获取(所有项)   this.form.validateFields(async (errors, values) => {
                          console.log(values)
                    });

3、可通过 v-decorator 的initialValue设置初始值

<a-form-item label="课程名称"
             v-bind="formItemLayout">
   <a-input placeholder="课程名称"
            v-decorator="['name', { initialValue:'姚峰', rules: [{ required: true, max: 50, message: '必填项,最大50字符' }] }]" />
</a-form-item>

4、下拉选择框的 labelInValue 属性

通常情况下,通过this.form.getFieldValue(“courseTeacherList”),你只能获取一个数组包含value值,形如[‘7’,‘10’],而通过labelInValue属性可以得到[{key: “7”,label: “王凤”},{{key: “10”,label: “姚峰”}}]

  • key表示value
  • label表示显示值
<a-form-item label="教师"
             v-bind="formItemLayout">
  <a-select mode="multiple"
  			labelInValue
            placeholder="请选择教师"
            v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项,请选择教师' }] }]">
	<a-select-option v-for="item in teacherList"
	                 :key="item.id"
	                 :value="item.id">{{ item.name }}</a-select-option>
  </a-select>
</a-form-item>

5、type类型检验

Type
    string: Must be of type string. This is the default type.
    number: Must be of type number.
    boolean: Must be of type boolean.
    method: Must be of type function.
    regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
    integer: Must be of type number and an integer.
    float: Must be of type number and a floating point number.
    array: Must be an array as determined by Array.isArray.
    object: Must be of type object and not Array.isArray.
    enum: Value must exist in the enum.
    date: Value must be valid as determined by Date
    url: Must be of type url.
    hex: Must be of type hex.
    email: Must be of type email.
    any: Can be any type.

数据获取与填充

//获取一个输入控件的值  Function(fieldName: string)
let myDate = this.form.getFieldValue("startDate");
//获取一组输入控件的值,如不传入参数,则获取全部组件的值   Function([fieldNames: string[]])
let value = this.form.getFieldsValue(["startDate","endDate"]);
let value = this.form.getFieldsValue();
//设置一组输入控件的值
this.form.setFieldsValue({
	startDate:res.result["startDate"],
	endDate:res.result["endDate"],
})
//设置一组输入控件的值  加了labelInValue属性
this.form.setFieldsValue({
	userName:{
		label:res.result["userName"],
		key:res.result["userNameId"]
	}
})
//设置表单数据  对日期、下拉框含labelInValue属性的form控件的数据设置要特殊处理才能绑定
//对于日期控件需要将string类型的数据转换moment类型
//对于下拉框含labelInValue属性控件,数据需要转换成key、label的对象格式
import moment from 'moment'
setFormValues (record) {
  // 控制教师
   if (courseTeacherList && courseTeacherList.length > 0) {
     record['courseTeacherList'] = courseTeacherList.map(item => ({
       key: item.teacherId + '',
       label: item.teacherName
     }))
   }
  const fields = ['courseTeacherList', 'certificateNo', 'cardTime', 'termValidity', 'documentStatus', 'remark']
  Object.keys(record).forEach((key) => {
    if (fields.indexOf(key) !== -1) {
      this.form.getFieldDecorator(key)
      const obj = {}
      if (key === 'cardTime' && record['cardTime'] != undefined) {
        obj[key] = moment(data[key], 'YYYY-MM-DD')
      } else {
        obj[key] = record[key]
      }
      this.form.setFieldsValue(obj)
    }
  })
},
//关闭表单清空表单数据
this.form.resetFields();
//提交表单获取数据
//通过this.form.validateFields函数进行表单验证以及数据获取
//对于日期控件,获取的是moment类型数据,需要转换成字符串储存,
//形如values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : ''
handleSubmit () {
  const { id } = this
  this.form.validateFields((err, values) => {
    if (!err) {
      this.submitLoading = true
      values.birthday = values.birthday ? values.birthday.format('YYYY-MM-DD') : ''
      // 处理教师
      values.courseTeacherList = values.courseTeacherList.map(item => {
        const obj = {}
        obj.teacherId = Number(item.key)
        return obj
      })
      if (id) {
        // 修改
        updateCourse({ id, ...values }).then(res => {
          if (res.code == 0) {
            this.$message.success('保存成功')
            this.form.resetFields()
            this.$router.back()
          } else {
            this.$message.error('保存失败,请稍后再试')
          }
        }).finally(() => {
          this.submitLoading = false
        })  
    } else {
        // 添加
        addCourse(values).then(res => {
          if (res.code == 0) {
            this.$message.success('保存成功')
            this.form.resetFields()
            this.$router.back()  
          } else {
            this.$message.error('保存失败,请稍后再试')
          }
        }).finally(() => {
          this.submitLoading = false
        })
      }
    }
  })
},

表单实例

<template>
  <div>
    <a-card>
      <a-form :form="form">
      	<!-- 文本框 -->
        <a-form-item label="课程名称"
                     v-bind="formItemLayout">
          <a-input placeholder="课程名称"
                   v-decorator="['name', { rules: [{ required: true, max: 50, message: '必填项,最大50字符' }] }]" />
        </a-form-item>
        <a-form-item label="教师"
                     v-bind="formItemLayout">
          <a-select mode="multiple"
                    labelInValue
                    placeholder="请选择教师"
                    v-decorator="['courseTeacherList', { rules: [{ required: true, message: '必填项,请选择教师' }] }]">
            <a-select-option v-for="item in teacherList"
                             :key="item.id"
                             :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 文本域 -->
        <a-form-item label="课程简介"
                     v-bind="formItemLayout">
          <a-textarea placeholder="课程简介"
                      :autosize="{ minRows: 6, maxRows: 10 }"
                      v-decorator="['introduction', { rules: [{ required: true, max: 1000, message: '必填项,最大1000字符' }] }]" />
        </a-form-item>
        <!-- 步进器 -->
        <a-form-item label="时长"
                     v-bind="formItemLayout">
          <a-input-number v-decorator="['timeLength',{initialValue:60,rules:[{required:true,message:'必填'}]}]"
          :min="1"
                          :max="100"
                          :precision="0" />
        </a-form-item>
        <!-- 日期控件 -->
        <a-form-item label="开课日期"
                     v-bind="formItemLayout">
          <a-date-picker v-decorator="['startDate', { rules: [{ type: 'object', required: true, message: '请选择开课日期' }] }]"
                         format="YYYY-MM-DD" />
        </a-form-item>
        <!-- 开关滑块 -->
        <a-form-item label="在线课程"
                     v-bind="formItemLayout">
          <a-switch checkedChildren="是"
                    unCheckedChildren="否"
                     v-decorator="['online', { valuePropName: 'checked', initialValue: true }]" />
        </a-form-item>
        <!-- 单选框 -->
        <a-form-item label="是否发布"
                     v-bind="formItemLayout">
          <a-radio-group name="radioGroup"
          				 v-decorator="['publish', { initialValue: 1 }]">
            <a-radio :value="1">发布</a-radio>
            <a-radio :value="0">不发布</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <a-row>
        <a-col :span="14"
               :offset="5"
               style="text-align: center;">
          <a-button :loading="submitLoading"
          			style="margin-left: 16px"
                    type="primary"
                    @click="handleSubmit">保存</a-button>
          <a-button style="margin-left: 16px"
                    @click="back">返回</a-button>
        </a-col>
       </a-row>
    </a-card>
  </div>
</template>
import moment from 'moment'
import { addCourse, getTeacherList, getCourseById, updateCourse } from '@/api/learning/course'
export default {
  data () {
    return {
      submitLoading: false,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          lg: { span: 7 },
          sm: { span: 7 }
        },
        wrapperCol: {
          lg: { span: 10 },
          sm: { span: 17 }
        }
      },
      teacherList: [],
      unitSn: ''
    }
  },
  created () {
    // 获取教师列表
    this.getTeacherList()
    // 获取详情
    if (this.id) {
      this.getInfo()
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  methods: {
    // 获取教师列表
    getTeacherList () {
      const unitSn = this.unitSn || this.$store.getters.userInfo.unitSn
      const params = {
        current: 1,
        size: -1,
        unitSn
      }
      getTeacherList(params).then(res => {
        if (res.code == 0) {
          if (res.data.records.length > 0) {
            this.teacherList = res.data.records.map(item => {
              const obj = {}
              obj.id = item.id + ''
              obj.name = item.name
              return obj
            })
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获取详情 设置表单数据
    getInfo () {
      let { id } = this
      id = Number(id)
      getCourseById(id).then(res => {
        if (res.code == 0) {
          this.setFormValues({ ...res.data })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 设置表单数据
    setFormValues (record) {
      const { courseTeacherList, unitSn } = record
      this.unitSn = unitSn
      // 控制教师
      if (courseTeacherList && courseTeacherList.length > 0) {
        record['courseTeacherList'] = courseTeacherList.map(item => ({
          key: item.teacherId + '',
          label: item.teacherName
        }))
      }
      const fields = ['name', 'courseTeacherList', 'introduction', 'timeLength', 'startDate', 'online', 'publish']
      Object.keys(record).forEach(key => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key)
          const obj = {}
          if (key === 'startDate' && record['startDate'] != undefined) {
            obj[key] = moment(record[key], 'YYYY-MM-DD')
          } else {
            obj[key] = record[key]
          }
          this.form.setFieldsValue(obj)
        }
      })
    },
    // 保存
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const { id } = this
          this.submitLoading = true
          // 处理教师
          values.courseTeacherList = values.courseTeacherList.map(item => {
            const obj = {}
            obj.teacherId = Number(item.key)
            return obj
          })
          // 处理日期
          values.startDate = values.startDate ? values.startDate.format('YYYY-MM-DD') : ''
          if (id) {
            // 修改
            updateCourse({ id, ...values }).then(res => {
              if (res.code == 0) {
                this.$message.success('保存成功')
                this.form.resetFields()
                this.$router.back()
              } else {
                this.$message.error('保存失败,请稍后再试')
              }
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            // 添加
            addCourse(values).then(res => {
              if (res.code == 0) {
                this.$message.success('保存成功')
                this.form.resetFields()
                this.$router.back()
              } else {
                this.$message.error('保存失败,请稍后再试')
              }
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    // 返回
    back () {
      this.$confirm({
        title: '还未保存,是否返回上一级?',
        okText: '确认返回',
        cancelText: '取消',
        onOk: () => {
          this.$router.back()
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 


Tags in this post...

Vue.js 相关文章推荐
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
vue实现登陆页面开发实践
May 30 #Vue.js
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
vue3不同环境下实现配置代理
May 25 #Vue.js
vue使用element-ui按需引入
May 20 #Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 #Vue.js
You might like
用文本文件制作留言板提示(上)
2006/10/09 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
浅析php header 跳转
2013/06/17 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
服务员自我评价
2014/01/25 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
民事上诉状范文
2015/05/22 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL