温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ant design vue的form表单如何取值

发布时间:2022-06-01 11:08:54 阅读:263 作者:zzz 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容介绍了“ant design vue的form表单如何取值”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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"
            : />
  </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值,形如[&lsquo;7&rsquo;,&lsquo;10&rsquo;],而通过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
    stringMust be of type stringThis is the default type.
    numberMust be of type number.
    booleanMust be of type boolean.
    methodMust be of type function.
    regexpMust be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
    integerMust be of type number and an integer.
    floatMust be of type number and a floating point number.
    arrayMust be an array as determined by Array.isArray.
    objectMust be of type object and not Array.isArray.
    enumValue must exist in the enum.
    dateValue must be valid as determined by Date
    urlMust be of type url.
    hexMust be of type hex.
    emailMust be of type email.
    anyCan 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"
               >
          <a-button :loading="submitLoading"
          			
                    type="primary"
                    @click="handleSubmit">保存</a-button>
          <a-button 
                    @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>

“ant design vue的form表单如何取值”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×