vue + element

您所在的位置：网站首页 › 南京新增一行 › vue + element

vue + element

2024-07-12 04:59| 来源: 网络整理| 查看: 265

问题：最近在做一个vue项目时，遇到了一个动态添加行数据，并且添加校验的需求。

一开始，并不顺利，用了几种方法都么有效果，下面我来叙述下我的菜坑过程（本人助攻后端，但是前端缺人，只好去帮忙了，就当是锻炼自己的技术广度）

1、首先是form表单：

删除添加

注意：此段代码的编写

表单绑定的 form对象如下

// 一开始，我的数据数组，是放在外面的，自己定义了一个ncidPositiveForm，新增和修改可以，但是校验不行，始终有问题 form:{ relativePersonNcidPositiveData: [] }, // 校验，其中的证件号码的校验，可以去搜，很多方法都可以 ncidPositiveRules: { xm: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], zjlx: [ { required: true, message: '请选择证件类型', trigger: 'change' } ], zjhm: [ { required: true, message: '请输入证件号码', trigger: 'change', }, { validator: zjhmRules, trigger: 'change' }, ], },

特别注意这里的写法：

// 通过索引去获取

2、添加操作

add(num) { let ncidPositiveForm = { xm: '', zjlx: '', zjhm: '', qzrq: '', cyrq: '', swrq: '', }; if(this.form.relativePersonNcidPositiveData == undefined) { this.form.relativePersonNcidPositiveData = new Array(); } this.form.relativePersonNcidPositiveData.push(ncidPositiveForm); },

注意：添加时，表单对象一定要放在方法内，如果在data中定义，新增和修改都会有问题，会出现，修改第一行，其他行数据会一起变，新增一行，数据和上一行一样，这是vue v-model双向绑定机制，有兴趣的自己查找下，此处不在赘述。

3、删除操作

remove(index, num) { this.form.relativePersonNcidPositiveData.splice(index, 1); },

【本文地址】

vue + element

vue + element

今日新闻

推荐新闻