elementUI表单嵌套表格并对每行进行校验

您所在的位置：网站首页 › 表格里面嵌套表格 › elementUI表单嵌套表格并对每行进行校验

elementUI表单嵌套表格并对每行进行校验

#elementUI表单嵌套表格并对每行进行校验| 来源: 网络整理| 查看: 265

elementUI 表单嵌套表格并进行校验。

目录效果展示代码链接关键代码完整代码

效果展示

先看看这是不是需要的效果^_^

如图，ElementUI 表单里嵌套了表格，表格内每行能进行【保存】【新增】【编辑】【删除】【重置】等操作，同时可以对每行的某些字段进行校验（而不是整个表单校验！），这种需求很常见，所以记录下来。

代码链接

gitee地址

关键代码表格数据 // 数据格式必须是【对象嵌套数组】，【form】绑定表单，【list】绑定表格 form: { // 表格数据 list: [ { id: 1, name: '小叶', age: '12', phone: '123456', show: true }, { id: 2, name: '小李', age: '23', phone: '123457', show: true }, { id: 3, name: '小林', age: '12', phone: '123458', show: true } ] }, 组件嵌套

添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"

这是 elementui 规定的格式，渲染后的结果为 list.1.name

每个字段要动态绑定表单的 rules 属性

如果不是以上的格式，会出错！！！

// 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性 // 每个字段动态的绑定表单的【prop】【rules】属性

校验方法

表单的字段对象存在于 this.$refs['form'].fields 中，并且字段对象具有 prop【datas.1.name】属性和 validateField 方法【验证 datas.1.name 能否通过校验】但是 validateField 方法需要手动创建来验证能否通过校验必须创建，否则会出错！！！ // 表单校验方法 // 【form】是需要校验的表单，就是表单中【ref】绑定的字段 // 【index】是需要传入的行数，字段【scope.$index】 validateField(form, index) { let result = true; for (let item of this.$refs[form].fields) { if(item.prop.split(".")[1] == index){ this.$refs[form].validateField(item.prop, err => { if(err !="") { result = false; } }); } if(!result) break; } return result; }

重置方法

// 对【需要校验】的表单字段进行重置 // 参数同校验方法，如果是全部重置 reset(form, index) { this.$refs[form].fields.forEach(item => { if(item.prop.split(".")[1] == index){ item.resetField(); } }) } // 如果需要全部重置可以直接质控表单中字段 // 【row】是每行传入的数据 resetRow(row) { row.name = ""; row.age = ""; row.phone = ""; } 完整代码

因为用的是在线链接，网络不稳定时页面不一定能加载出来，使用时可以更换成本地的！

vue表单嵌套表格逐行验证 vue表单嵌套表格逐行验证 {{scope.row.name}} {{scope.row.age}} {{scope.row.phone}} 保存编辑新增删除重置 var app = new Vue({ el: '#app', data() { return { // 表单数据 form: { // 表格数据 list: [{ id: 1, name: '', age: '', phone: '', show: true }] }, // 表单验证规则 rules: { name: [{ required: true, message: '请输入姓名！', trigger: 'blur' }], age: [{ required: true, message: '请输入年龄！', trigger: 'blur' }], phone: [{ required: true, message: '请输入联系方式！', trigger: 'blur' }], }, // 表格长度默认为 1 listLength: 1, } }, methods: { // 校验 validateField(form, index) { let result = true; for (let item of this.$refs[form].fields) { if (item.prop.split(".")[1] == index) { this.$refs[form].validateField(item.prop, err => { if (err != "") { result = false; } }); } if (!result) break; } return result; }, // 重置【只针对校验字段】 reset(form, index) { this.$refs[form].fields.forEach(item => { if (item.prop.split(".")[1] == index) { item.resetField(); } }) }, // 重置【全部】 resetRow(row) { row.name = ""; row.age = ""; row.phone = ""; }, // 保存 save(index, row) { if (!this.validateField('form', index)) return; row.show = false; }, // 新增 addRow(index, row) { if (!this.validateField('form', index)) return; this.form.list.push({ id: index + 2, name: '', age: '', phone: '', show: true }); this.listLength = this.form.list.length; }, // 编辑 edit(row) { row.show = true; }, // 删除 delRow(index, row) { if (this.form.list.length > 1) { this.form.list.splice(index, 1); this.listLength = this.form.list.length; } else { this.form.list = [{ id: 1, name: '', age: '', phone: '', show: true }]; } }, } })

整理不易，给个赞呗~

elementUI表单嵌套表格并对每行进行校验的相关教程结束。

【本文地址】

elementUI表单嵌套表格并对每行进行校验

elementUI表单嵌套表格并对每行进行校验

今日新闻

推荐新闻