首页 > 其他分享 >vue + element-ui 的from表单嵌套数组的验证问题

vue + element-ui 的from表单嵌套数组的验证问题

时间:2023-08-15 09:55:52浏览次数:58  
标签:vue Itemtype 自定义 验证 Param element ui 数组 id

在 vue + element-ui/plus 的项目中,有的时候会出现表单自定义增加数组字段,并要对新增加的字段添加相关验证。

举个例子

0
// 结构
data(){
    return{
        form:{
            name:'',
            Param:[    
                {id:0,label:'',Itemtype:0,},
                {id:1,label:'',Itemtype:0}
            ]    // 而Param数组里面是一个可以自定义增加/修改的对象
        }     
    }
}
 
对于常用的表单字段,一般在 el-from 组件 添加 rules 规则,只要 prop 的键名对的上,就能正常进行规则验证。 但是对于这种自定义的嵌套数组,验证就比较麻烦了。

解决方法:

1.定义两个验证规则,一个是外部字段验证,另一个是数组自定义字段验证的。
data(){
    return{
        form:{
            name:'',
            Param:[    
                {id:0,label:'',Itemtype:0,},
                {id:1,label:'',Itemtype:0}
            ]    // 而Param数组里面是一个可以自定义增加/修改的对象
        },
        EditFormRules:{ // 外部
            name:[{required:true,message:'必填项',trigger:'blur'}]        
        },
        ParamFormRules:{ // 单个添加项
            Itemtype:[{required:true,message:'必填项',trigger:'blur'}]
        }
    }
}
2.修改el-form 结构
<div v-for="(item,index) in form.Param" :key="index" style="padding-top:5px">
    <el-form-item label="参数" :prop="`Param[${index}].Itemtype`" :rules="ParamFormRules.Itemtype">
        <el-input v-model="item.Itemtype" type="text" />
    </el-form-item>
    //  或
    <el-form-item label="参数" :prop="`Param[${index}].Itemtype`" :rules="ParamFormRules.Itemtype">
        <el-input v-model="form.Param[index].Itemtype" type="text" />
    </el-form-item>
</div>

 

标签:vue,Itemtype,自定义,验证,Param,element,ui,数组,id
From: https://www.cnblogs.com/Hymy/p/17630514.html

相关文章

  • vue--day64--Vue-resource
    安装npminstallvue-resource//main.js使用importVueResourcefrom"vue-resource"Vue.use(VueResource)安装好Vue-resource之后,在Vue组件中,我们就可以通过this.$http或者使用全局变量Vue.http发起异步请求......
  • burpsuite靶场----SQL注入1----where注入
    burpsuite靶场----SQL注入1----where注入靶场链接https://portswigger.net/web-security/sql-injection/lab-retrieve-hidden-data推荐burpsuite插件xiasql插件https://github.com/smxiazi/xia_sql正式开始1.先随便点个商品的viewdetails2.在productid处可能存在数字......
  • 关于Vue的就地更新策略的解析
    在Vue中使用v-for渲染列表时,默认使用就地更新策略。该策略默认是基于索引的,规定在列表绑定的数据元素顺序变化时,不会重新创建整个列表,而只是更新对应DOM元素上的数据。以下代码实现了一个TODO列表的勾选、添加和删除功能:<!DOCTYPEhtml><html><head><title>In-PlaceUpd......
  • VScode 远程连接服务器 GUI 显示
    VScode远程连接服务器的指导就不详述了注意以下几点在本地ssh配置文件config中加上如下配置ForwardAgentyesForwardX11yesForwardX11Trustedyes正文如下:安装插件vscode上安装RemoteX11(SSH)和RemoteX11插件:安装xserver服务微软官方推荐安装VcXsrv理......
  • String、StringBuilder、StringBuffer
    String、StringBuilder和StringBuffer是Java中用于处理字符串的类,它们之间有以下区别:不可变性:String类是不可变的,即创建后不能被修改。每次对String进行操作时,都会创建一个新的String对象。而StringBuilder和StringBuffer是可变的,可以进行修改和拼接操作。线程安全性:String......
  • Vue computed 计算属性语法
    1.不传参import{ref,computed}from"vue";letcarnoColor=computed(()=>{returnformatterCarnoColor(model.value.carnoColor)}) 2.传参<divv-for="iteminlist"><divv-if='isShow(item)'>是否显示</div......
  • React和Vue的区别,大家怎么看?
    Vue更适合小项目,React更适合大公司大项目;Vue的学习成本较低,很容易上手,但项目质量不能保证......真的是这样吗?借助本篇文章,我们来从一些方面的比较来客观的去看这个问题。 论文档的丰富性从两个方面来看这个问题:社区的支持力度及文档的完善性。 对于任何编程语......
  • jmeter详解(2)-GUI图形页面
    菜单栏 对应中文 运行里面有和远程执行相关的 选项包括外观语言、里面有日志查看的功能,SSL管理与https协议的测试相关 工具里面有函数助手及报告相关的东西,以及其他 快捷工具栏 从左到右依次为:新建、模版、打开、保存、剪切、粘贴、全部展开、全部折叠、切......
  • vue3 使用 vue-i18n 配置多语言环境
    1.插件地址:VueI18n官方文档GitHub地址2.安装:在Vue之后引入vue-i18n,它会自动安装:<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>NPM:npminstallv......
  • elementUi table表格 标头自定义,给表头加点击事件
    <el-table-columnlabel="">  <el-table-columnprop="column":render-header="renderHeader"width="160">    <templateslot-scope="scope">      <span>{{scope.row.column[......