如何制作小程序_vue使用Element组件时v

发布时间:2021-01-08 14:19 作者:jianzhan

摘要: vue应用Element部件时v-for循环系统里的表格项认证方式 本文关键详细介绍了vue应用Element部件时v-for循环系统里的表格项认证方式,网编感觉挺好的,如今共享给大伙儿,也给大伙儿

vue使用Element组件时v-for循环里的表单项验证方法       这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。

首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。

然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法,我们通过查找解决方案和实际验证,总结出来解决方法如下。

首先是循环表单项没有加验证之前的代码:

 template 
 div 
 el-form ref="form" :model="form" :rules="rules" label-width="120px" 
 el-row :gutter="10" 
 el-col :span="12" :offset="0" 
 el-form-item label="套餐名称:" prop="activityName" id="activityName" 
 el-input v-model="form.activityName" /el-input 
 /el-form-item 
 /el-col 
 /el-row 
 el-row :gutter="10" 
 el-col :span="12" 
 el-form-item label="状态:" 
 el-radio v-model="form.status" label="1" 上线 /el-radio 
 el-radio v-model="form.status" label="0" 下线 /el-radio 
 /el-form-item 
 /el-col 
 /el-row 
 el-row :gutter="10" 
 el-col :span="2" 
 div 梯度设置: /div 
 /el-col 
 el-col :span="20" 
 el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index" 
 el-col :span="6" 
 el-form-item label="商品数量:" 
 el-input v-model="item.num" type="number" size="small" /el-input 
 /el-form-item 
 /el-col 
 el-col :span="6" 
 el-form-item label="优惠价格:" 
 el-input v-model="item.price" type="number" size="small" /el-input 
 /el-form-item 
 /el-col 
 el-col :span="4" 
 i @click="deleteLadder(index)" /i nbsp; nbsp;
 i @click="addLadder" v-if="index==0" /i 
 /el-col 
 /el-row 
 /el-col 
 /el-row 
 el-form-item size="medium" 
 el-button @click="resetForm('form')" 取消 /el-button 
 el-button type="primary" @click="submitForm('form')" 提交 /el-button 
 /el-form-item 
 /el-form 
 /div 
 /template 
 script 
/* eslint-disable */
export default {
 data() {
 return {
 form: {
 activityName: '',
 status: '1',
 productGroup: [{num:"",price:""}]
 rules: {
 activityName: [
 { required: true, message: '请输入套餐名称', trigger: 'blur' }
 methods: {
 deleteLadder(index)
 if(this.form.productGroup.length 1){
 this.form.productGroup.splice(index,1);
 addLadder()
 this.form.productGroup.push({num:"",price:""});
 submitForm(formName)
 console.log("activityName...",this.form.activityName);
 this.$refs[formName].validate((valid,obj) = {
 if (valid) {
 this.submitFormAction();
 } else {
 this.$message.error("验证不通过");
 submitFormAction()
 this.$ess("提交成功");
 resetForm(formName)
 this.$refs[formName].resetFields();
 this.form.productGroup = [{num:"",price:""}];
 /script 
 style 
.el-form-item {
 margin-bottom: 20px;
 /style 

首先是添加rules规则,这个和正常添加规则一样:

productGroupRules: {
 productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],
 productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]

然后给表单项添加验证,以商品数量为例:

 el-form-item label="商品数量:" :prop="'productGroup.'+index+'.num'" :rules="productGroupRules.productGroupNum" 
 el-input v-model="item.num" type="number" size="small" /el-input 
 /el-form-item 

注意这里:rules是每个表单项都要添加,有多个的话用productGroupRules.productGroupNum这样的形式区分,对应上面productGroupRules里的内容。

另外主要就是:prop了,注意正常验证表单项是prop,而这里是:prop。
:prop="'productGroup.'+index+'.num'"是拼接的形式,前面是v-for绑定的数组,中间是数组索引index,最后是表单项绑定的v-model的名称,然后用点.把它们连接起来。这三项都必须保证正确,错一个都无法验证。

另外就是要注意,v-for绑定的数组也必须绑定在form对象里,注意上面的data里:

form: {
 activityName: '',
 status: '1',
 productGroup: [{num:"",price:""}]
form: {
 activityName: '',
 status: '1'
productGroup: [{num:"",price:""}]

是无法验证的,这一点也要注意。

好了,以上就是解决vue使用Element组件时v-for循环里的表单项验证的解决方案了,希望能帮助到遇到此问题的同学。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 家政服务预定微信小程序

    互联网的快速发展趋势发展趋势,给大伙儿的生活起居造成诸多便捷便捷,便于追求完美极致极简易化,现如今年轻一代对家政服务服务服务规定还是越来越越越大,互连网信办息內容

  • 微信小程序和app哪个更能

    微信小程序与APP,这二者实际上不矛盾,还可以说成一种良好市场竞争。 程序类的APP商品自身的实际意义全是以便让客户,更强的感受。不会有说哪一个最好。 假定这一难题放到

  • 开发一个微信小程序需要

    开发设计设计方案一个手机上手机微信手机微信微信小程序,最开始需看看是本身开发设计设计方案还是找承揽方机构来开发设计设计方案。倘若本身开发设计设计方案,务必修建精锐

  • 九枝兰采访微盟:投身手

    原题目:九枝兰采访微盟:投身手机微信,掘金微信小程序,微盟怎样在企服销售市场市场竞争中出类拔萃? 小编按:提到微盟这个企业,网编心里闪过出好多个重要词—— 代理商商

  • 零售业更聪慧,微信小程

    近几年来,零售商的“数据信息化”、“聪明伶俐化”被作为是关乎企业生死存亡的血战局。在这其中的逻辑性性十分好啦解:转型发展裹挟着从业者的焦虑情绪心态而成,技术性性的