Application scenarios:
In actual use, you often encounter the need to use table tables in Form forms for form submission, and at the same time, you need to verify the table fields. The effect is as shown in the figure:
In this verification, the most critical issue is how to dynamically bind the prop to el-form-item.
:prop="'tableData.' + scope.$index + '.field name'"
Method 1:
<template>
<div class="app-container">
<el-form :model="fromData" ref="from">
<el-table :data="">
<el-table-column label="Name">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="">
<el-input v-model=""></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="address">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="">
<el-input v-model=""></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="warning" @click="submit('from')">submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fromData:{
domains:undefined
},
fromaDataRules:{
name:[{ required: true, message: 'Please enter', trigger: 'blur' }],
desc:[ { required: true, message: 'Please fill in', trigger: 'blur' }]
},
domains:[],
}
},
mounted(){
()
},
methods:{
initDomains(){
=[
{
name: "Little Red",
desc: "11123"
},
{
name: "Little Red",
desc: "11123"
}
]
},
init(){
this.$set(,'domains',)
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
('error submit!!');
return false;
}
});
}
}
}
</script>
There are two key parts in the above code:
1.:prop="'domains.'+scope.$index+'.name'" , used to dynamically bind prop to el-form-item;
2. this.$set(,'domains',) is used to set the domains node for fromData.
Method 2:
<template>
<div class="app-container">
<el-form :model="fromData" ref="from">
<el-table :data="">
<el-table-column label="Name">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="">
<el-input v-model=""></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="address">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="">
<el-input v-model=""></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="warning" @click="submit('from')">submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fromData:{
fromaDataRules:{
name:[{ required: true, message: 'Please enter', trigger: 'blur' }],
desc:[ { required: true, message: 'Please fill in', trigger: 'blur' }]
},
domains:[],
},
}
},
mounted(){
()
},
methods:{
initDomains(){
=[
{
name: "Little Red",
desc: "11123"
},
{
name: "Little Red",
desc: "11123"
}
]
},
init(){
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
('error submit!!');
return false;
}
});
}
}
}
</script>
Supplementary knowledge:Vue+ElementUI table for complete addition, deletion, reference, modification and verification functions
I won't say much nonsense, let's just read the code~
<template>
<div class="block">
<el-col>
<el-row>
<el-form>
<el-form-item>
<el-input style="width: 250px;float: left" placeholder="Please enter a name" v-model="query"></el-input>
<el-button @click="handleSelect" style="float: left;margin-left: 10px">Query</el-button>
<el-button @click="handleAdd" style="float: left;margin-left: 10px">New</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-table
:data="tableData"
style="width: 100%"
border>
<el-table-column
prop="date"
label="date"
width="250">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="250">
</el-table-column>
<el-table-column
prop="address"
label="address"
width="350">
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index,)">edit</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index,)">delete</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<el-dialog class="dialog" :title="operation===true ?'Added':'edit'" :="dialogVisible" width="350px" >
<el-form label-width="80px" :model="lineData" :rules="addRule" ref="lineData" >
<el-form-item label="date" prop="date">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item label="Name" prop="name">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item label="address">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item>
<el-button @click="handleSave" type="primary">Sure</el-button>
<el-button @click="handleCancel">Cancel</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-row>
</el-col>
</div>
</template>
<script>export default {
data () {
return {
operation: true,
dialogVisible: false,
lineData: {},
editData: {},
query: '',
addRule: {
date: [{required: true, message: 'Please enter a date', trigger: 'blur'}],
name: [{required: true, message: 'Please enter a name', trigger: 'blur'}]
},
tableData: [{
id: 1,
date: '2016-05-02',
name: 'Wang Yihu',
address: 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai'
}, {
id: 2,
date: '2016-05-04',
name: 'Wang Erhu',
address: 'Lian 1517, Jinshajiang Road, Putuo District, Shanghai'
}, {
id: 3,
date: '2016-05-01',
name: 'Wang Yihu',
address: 'Lian 1519, Jinshajiang Road, Putuo District, Shanghai'
}, {
id: 4,
date: '2016-05-03',
name: 'Wang Sihu',
address: 'Lan 1516, Jinshajiang Road, Putuo District, Shanghai'
}]
}
},
methods: {
handleEdit (index, row) {
= (row)
= ()
= true
= false
},
handleDelete (index, row) {
(index, 1)
},
handleAdd () {
= true
= true
= {}
= ()
},
handleSelect () {
if ( !== '') {
const tmpData = []
for (let item of ) {
if ( === ) {
(item)
}
}
= tmpData
}
},
handleSave () {
this.$((valid) => {
if (valid) {
()
= false
} else {
alert('Save failed')
return false
}
})
},
handleCancel () {
= false
},
addLine (item) {
let existed = false
for (let i = 0; i < ; i++) {
if ([i].id === ) {
[i].id =
[i].name =
[i].address =
[i].date =
existed = true
break
}
}
if (!existed) {
()
}
}
}
}
</script>
<style scoped>
.block{
width: 75%;
margin-left: 400px;
margin-top: 200px;
}
</style>
The above article uses element-ui + Vue to solve the problem of form verification in table. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.