Shulou(Shulou.com)06/02 Report--

This article mainly introduces the nesting table of Vue elementUI form and the example analysis of checking each row, which is very detailed and has certain reference value. Friends who are interested must read it!

Effect display

Let's see if this is the desired effect ^ _ ^

As shown in the figure, there are tables nested in the ElementUI form, and each row in the table can perform operations such as [save] [add] [edit] [delete] [reset]. At the same time, some fields in each row can be checked (instead of the entire form)! This requirement is very common, so write it down.

Code link

Gitee address

Key code table data / / data format must be [object nested array], [form] binding form [list] bind table form: {/ / tabular data list: [{id: 1, name: 'lobule', age: '12345, phone:' 123456, show: true}, {id: 2, name:'Li', age:'23, phone: '123457, show: true}, {id: 3, name:' Xiao Lin', age: '12345, phone:' 123458, show: true}]}} Component nesting

When adding a field check, the format must be written as follows: prop= "'list.' + scope.$index +' .name'"

This is the format specified by elementui, and the rendered result is list.1.name.

Each field should be dynamically bound to the rules property of the form

If it is not the above format, it will make an error!

/ / the form must be nested outside the table, and the form must be bound to the [rules] [ref] attribute / / the dynamic binding form's [prop] [rules] attribute verification method for each field.

The field object of the form exists in this.$refs ['form'] .fields, and the field object has a prop [datas.1.name] property and a validateField method [verify that datas.1.name can pass the check]

But the validateField method needs to be created manually to verify whether it can pass the check

It must be created, or it will make an error!

/ / form verification method / / [form] is the form that needs to be verified, that is, the field bound by [ref] / / [index] is the number of rows to be passed in, and the field [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 method / / A pair of form fields that [need to be verified] are reset / / parameters are the same as the verification method, if all reset reset (form, index) {this.$ refs [form] .fields.forEach (item = > {if (item.prop.split (".") [1] = index) {item.resetField () })})} / / if you need to reset all, you can directly control the field / / [row] in the form is the data resetRow (row) {row.name = ""; row.age = "; row.phone =";} complete code.

Because online links are used, the page may not be loaded when the network is unstable, but can be replaced with a local one when in use!

Vue form nested table row-by-row validation vue form nested table row-by-row validation {{scope.row.name}} {{scope.row.age}} {{scope.row.phone}} Save edits Add delete reset Var app = new Vue ({el:'# app' Data () {return {/ / form data form: {/ / Table data list: [{id: 1, name:', age:', phone:', show: true}]} / / form validation rule rules: {name: [{required: true, message: 'please enter your name!' , trigger: 'blur'}], age: [{required: true, message:' please enter your age!' , trigger: 'blur'}], phone: [{required: true, message:' please enter contact details!' , trigger: 'blur'}],}, / / the table length defaults to 1 listLength: 1,}}, methods: {/ / check 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 [for check fields only] reset (form, index) {this.$ refs [form] .fields.forEach (item = > {if (item.prop.split (".") [1] = index) {item.resetField () }})}, / / reset [all] resetRow (row) {row.name = "; row.age ="; row.phone = "" }, / / Save save (index, row) {if (! this.validateField ('form', index)) return; row.show = false;}, / / add 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 edit (row) {row.show = true;}, / / delete 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}] }},}}) these are all the contents of the article "sample Analysis of Vue elementUI forms nesting tables and verifying each row". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.