位置: IT常识 - 正文

element-ui动态表单和验证(elementui动态表单数据回显)

编辑:rootadmin
element-ui动态表单和验证

推荐整理分享element-ui动态表单和验证(elementui动态表单数据回显),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui动态表单数据回显,elementui动态表单数据回显,elementui动态表格合并,elementui动态表单组件,elementui动态表格合并,elementui动态表单,elementui动态表单数据回显,elementui动态表单,内容如对您有帮助,希望把文章链接给更多的朋友!

在使用element-ui开发中,经常会用到对动态创建的表单进行字段验证,比如新增多个类似卡片的表单,里面的字段需要做验证,此时就要使用到动态表单验证,官方文档写的有示例,但是不够清晰。除了官方示例,还可以使用循环生成多个form实现该需求。

第一种官方示例:一个Form多项element-ui动态表单和验证(elementui动态表单数据回显)

下面以实际项目中的代码为例:

<el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small" style="width: 90%;"> <div v-for="(item, index) in form.list" :key="item.id" class="box-card"> <el-form-item :prop=" 'list.' + index + '.maintUnit'" :rules="rules.maintUnit" label="运维单位"> <SearchOpsDepartment :value.sync="item.maintUnit"></SearchOpsDepartment> </el-form-item> <el-form-item :prop=" 'list.' + index + '.userId'" :rules="rules.userId" label="运维人员"> <SearchUsers :value.sync="item.userId"></SearchUsers> </el-form-item> <div> <el-button type="text" @click="handleAdd">添加</el-button> <el-button v-if="index !== 0" type="text" @click="handleDelete(index)">删除</el-button> </div> </div></el-form><script>data() { return { form: { list: [{ id: Date.now() }] // 这里添加了一个当前时间戳作为循环使用的key,如果使用index作为key,虽然避免的报错,但是对性能没有什么帮助,而且可能增加新能问题。 }, rules: { maintUnit: [ { required: true, message: '运维单位不能为空!', trigger: ['change', 'blur'] } ], userId: [ { required: true, message: '运维人员不能为空!', trigger: ['change', 'blur'] } ] } } }</script>注意重点form表单里的 :model="form" :rules="rules"model和rules不能省略,而且这个model必须是个对象,虽然在当前例子里,我们的数据form其实就是一个数组,但是还要包裹一层成对象。每一项绑定prop时,一定要按照:prop=" 'list.' + index + '.maintUnit'"这种格式,list是需要循环的数组key名,一定不要写成form.list,也不是循环出的每一项item,index是每项的下标,maintUnit是当前字段key值。每一项必须单独绑定验证规则,如例子中的:rules="rules.maintUnit"prop和当前字段的key值要保持一致,无论是动态表单还是静态表单都要保持一致验证规则不能用正则表单验验证时,一定要有默认值。比如form里的input绑定的是v-model="form.value",data里定义form时一定要要加value,如form: { value: '' }第二种:多个form<CardBox v-for="(item, index) in list" :key="index" :title="item.itemName"> <el-form ref="form" :model="item" class="size-auto width-100" :rules="rules" :inline="true" size="medium" label-width="120px"> <el-form-item label="计划工程量" prop="workAmount"> <el-input v-model.trim="item.workAmount" maxlength="15" clearable placeholder="支持小数点后2位" @change="handleComputed(item, index)" /> </el-form-item> <el-form-item label="单价" prop="unitPrice"> <el-input v-model.trim="item.unitPrice" maxlength="50" show-word-limit clearable placeholder="请输入" @change="handleComputed(item, index)" /> </el-form-item> <el-form-item label="计划完成金额" prop="prepareCompletionMoney" :rules="moneyRules(item.budgetContent.budgetMoney)"> <el-input v-model.trim="item.prepareCompletionMoney" disabled maxlength="15" clearable placeholder="支持小数点后2位"> <i slot="suffix" class="el-input__icon input-unit">元</i> </el-input> </el-form-item> <el-form-item label="工作内容及标准"> <el-input v-model.trim="item.content" type="textarea" maxlength="200" show-word-limit clearable placeholder="请输入" /> </el-form-item> <el-form-item label="备注"> <el-input v-model.trim="item.remark" type="textarea" maxlength="200" show-word-limit clearable placeholder="请输入" /> </el-form-item> </el-form></CardBox><script>data() { return { list: [], rules: { workAmount: [{ validator: this.validNum, trigger: 'blur' }], unitPrice: [{ validator: this.validNum, trigger: 'blur' }], adjustmentFactor: [{ validator: this.validNum, trigger: 'blur' }] } } }, methods: { validNum(rule, value, callback) { if (value && !isNumber2(value)) { callback(new Error('填写格式错误')) } else { callback() } }, moneyRules(budgetMoney) { return [{ validator: (rule, value, callback) => this.validMoney(rule, value, callback, budgetMoney), trigger: 'change' }] }, validMoney(rule, value, callback, budgetMoney) { if (value) { if (value > budgetMoney) { callback(new Error('不能大于预算金额')) } else { callback() } } else { callback() } }, // 获取多个form验证结果 handleValidate() { const list = [] const validas = [] this.$refs['form'].forEach((item, index) => { list.push(new Promise(resolve => { item.validate(valida => { validas.push(valida) resolve() }) }) ) }) Promise.all([...list]).then(() => { const res = !validas.some(item => item === false) return res }).catch(() => { return false }) } }</script>复杂表单的验证

很多时候会遇到其中一个值,需要当前项的某个值做验证,如上第二种表单中,要求计划完成金额不能大于预算量,这里有两种实现方式

1、通过 rule.field获取到当前项下标,只适用第一种动态表单;

validEverydayBudgetAmount(rule, value, callback) { if (value) { if (!isNumber2(value)) { callback(new Error('填写格式错误')) return } // rule.field转为数组后第二个就是下标 const index = rule.field.split('.')[1] const budgetAmount = this.everydayCost[index].budgetAmount if (value > budgetAmount) { callback(new Error(`不能大于总预算量${budgetAmount}`)) } else { callback() } } else { callback() }},

2、把验证规则写在item行内,这样就可以通过传参获取当前项值;

<el-form-item label="计划完成金额" prop="prepareCompletionMoney" :rules="moneyRules(item.budgetContent.budgetMoney)">// 验证规则见第二种表单的示例代码获取验证结果

第二种多个form的,验证结果获取较为麻烦,因为每个验证都是异步,这里使用promise方式获取。父组件获取验证结果时,调用子组件内handleValidate方法,通过then或者await获取结果即可。

// 获取多个form验证结果,具体参考第二种form代码handleValidate() { const list = [] const validas = [] this.$refs['form'].forEach((item, index) => { // 把单个验证结果处理为promise函数,然后添加到list中 list.push(new Promise(resolve => { item.validate(valida => { validas.push(valida) resolve() }) }) ) }) // 通过Promise.all等待几个验证都完成再处理 return Promise.all([...list]).then(() => { const res = !validas.some(item => item === false) return res }).catch(() => { return false })}
本文链接地址:https://www.jiuchutong.com/zhishi/299219.html 转载请保留说明!

上一篇:一分钟玩转Stable Diffusion(一分钟玩转钉钉文档是什么东西)

下一篇:【Pytorch深度学习50篇】·······第六篇:【常见损失函数篇】-----BCELoss及其变种

  • 微信一码通不是本人怎么改

    微信一码通不是本人怎么改

  • 快手怎么禁止别人下载(快手怎么禁止别人发弹幕)

    快手怎么禁止别人下载(快手怎么禁止别人发弹幕)

  • lighting接口什么意思(lighting 接口)

    lighting接口什么意思(lighting 接口)

  • 网站推广的常用办法(网站推广的方法有哪几种)

    网站推广的常用办法(网站推广的方法有哪几种)

  • qq能发多大的压缩文件(扣扣可以发多大的压缩包)

    qq能发多大的压缩文件(扣扣可以发多大的压缩包)

  • 为什么手机打字都是繁体字(为什么手机打字变成小界面)

    为什么手机打字都是繁体字(为什么手机打字变成小界面)

  • snkrs拒收会退款吗(snkrs订单拒收)

    snkrs拒收会退款吗(snkrs订单拒收)

  • 如何看朋友圈谁把你屏蔽了(如何看朋友圈谁把你删除了)

    如何看朋友圈谁把你屏蔽了(如何看朋友圈谁把你删除了)

  • 怎么隐藏抖音在线时间(怎么隐藏抖音在线状态)

    怎么隐藏抖音在线时间(怎么隐藏抖音在线状态)

  • 聊天记录怎么做成文件(聊天记录怎么做证据材料)

    聊天记录怎么做成文件(聊天记录怎么做证据材料)

  • 手机网络被限速了怎么解决(手机网络被限速是什么意思)

    手机网络被限速了怎么解决(手机网络被限速是什么意思)

  • md531ch/a是ipad几代(md533ch/a是ipad几)

    md531ch/a是ipad几代(md533ch/a是ipad几)

  • 手机京东怎么添加朋友(手机京东怎么添加E卡)

    手机京东怎么添加朋友(手机京东怎么添加E卡)

  • 荣耀20可以屏幕解锁吗(荣耀20可以屏幕指纹解锁吗)

    荣耀20可以屏幕解锁吗(荣耀20可以屏幕指纹解锁吗)

  • 淝水是什么的支流(淝水是什么的资料)

    淝水是什么的支流(淝水是什么的资料)

  • qq空间怎么关掉好友热播(qq空间怎么关掉此刻)

    qq空间怎么关掉好友热播(qq空间怎么关掉此刻)

  • airpods2容易掉吗(airpods2容易脱落吗)

    airpods2容易掉吗(airpods2容易脱落吗)

  • 怎么把照片弄成扫描件(怎么把照片弄成一寸的电子版照片)

    怎么把照片弄成扫描件(怎么把照片弄成一寸的电子版照片)

  • 微信加人显示操作频繁怎么办(微信加人显示操作频繁怎么申诉)

    微信加人显示操作频繁怎么办(微信加人显示操作频繁怎么申诉)

  • 抖音模糊镜头怎么拍的(抖音模糊镜头怎么调)

    抖音模糊镜头怎么拍的(抖音模糊镜头怎么调)

  • iqoo中文怎么读(iqooz1中文怎么读)

    iqoo中文怎么读(iqooz1中文怎么读)

  • 微信下面有个对号怎么去掉(微信下边有一个对号是什么意思)

    微信下面有个对号怎么去掉(微信下边有一个对号是什么意思)

  • airpods是自动充电吗(airpodspro自动充电)

    airpods是自动充电吗(airpodspro自动充电)

  • 小米手机的白名单在哪里(小米手机的白名单在哪里取消)

    小米手机的白名单在哪里(小米手机的白名单在哪里取消)

  • wps表格怎么保存到桌面(wps表格怎么保存为pdf格式)

    wps表格怎么保存到桌面(wps表格怎么保存为pdf格式)

  • 前程无忧如何投简历(前程无忧如何投诉招聘平台虚假招聘)

    前程无忧如何投简历(前程无忧如何投诉招聘平台虚假招聘)

  • 现代信号处理——阵列信号处理(空域滤波原理及其算法)(现代信号处理张贤达pdf)

    现代信号处理——阵列信号处理(空域滤波原理及其算法)(现代信号处理张贤达pdf)

  • 递延所得税负债怎么算
  • 个人卖给公司车需要什么手续
  • 劳务公司在异地做项目需要提供当地完税证明
  • 外地工程款没有预缴会怎么样
  • 发放遗属补助还要拍照片吗山东
  • 关于年底双薪和分红问题的处理
  • 质保期内质量问题
  • 工程投标保证金最新规定
  • 房地产企业内部查账查什么
  • 承租人对融资租赁业务核算有哪些主要内容
  • 没在公司交社保遣散的怎么赔偿
  • 企业亏损情况下股东借款怎么办
  • 公司车辆怎么申请
  • 营改增后建筑企业财务核算
  • 酒类消费税征收环节归纳
  • 支付的租金计入什么会计科目
  • 烟草消费税计算方法
  • 固定资产取得方式A04代号
  • 期交保费资金占用年限计算公式
  • 土地出让金怎么入账
  • 网络科技定额发票怎么做分录?
  • 冲抵货款销售返利会计分录怎么写?
  • 企业未成立工会需要交工会经费吗
  • 间接生产费用包括
  • 酒店试菜费用会计分录
  • 买股票的分红怎么拿
  • 财务人员工资计入什么费用?
  • 企业重组特殊性处理通俗理解
  • 下花园6路公交车时间表
  • 小规模餐饮业怎样报税减免
  • 最新windows10
  • 创业补贴的作用
  • rk3328 sdk
  • php的八种类型
  • 增值税普通发票和专用发票有什么区别
  • 免购车税政策
  • 待处理财产损益借贷方向
  • php删除数组中指定元素
  • laravel artisan命令
  • php多文件上传代码
  • rc远程桌面
  • 几种财务自由
  • ibm_db_dbi
  • 当期可抵扣进项税额包括进项转出额吗
  • 地价计入房产原值文件解读
  • sqlserver2008导出表结构和表数据
  • sql分组计算
  • 建筑企业增值税怎么算
  • 应付账款已付款应该怎样记账
  • 企业接受捐赠如何确认收入
  • 借款利息应计入
  • 母猪生小猪会计分录
  • 发票几个月内可以红冲
  • mysql连接是什么协议
  • sqlserver中将varchar类型转换为int型再进行排序的方法
  • 华尔街日报体
  • win10系统的邮件和日历跟outlook一样嘛
  • centos.repo
  • freebsd ntfs
  • 第一启动项硬盘
  • vmware tools安装包在哪
  • w10 2021年更新
  • 修改linux启动项
  • win7电脑视频预览图如何显示出来
  • win7打印错误怎么解决
  • win7开机黑屏只有一个鼠标箭头
  • linux在实际工作中的应用
  • win7 u盘启动按哪个键
  • windows8.1家庭版安装密钥
  • linux错误提示
  • 天天数链是做什么的
  • 用python循环语句
  • jquery+ajax实现省市区三级联动效果简单示例
  • 微软早在1985年便首次使用了安卓上饱受争议的汉堡按钮
  • python怎么用
  • jquery页面布局
  • 重庆市国家税务局电子税务局官网
  • 公司开票明细如何查询
  • 贵州省地方税务局历任纪检组长马平
  • 年应税销售额超过小规模纳税人标准的企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设