Vue + Element ui 实现动态表单，包括新增行/删除行/动态表单验证/提交功能
导读：总结/朱季谦最近通过Vue + Element ui实现了动态表单功能，该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能，趁热打铁，将开发心得记录下来，方便以后再遇到类似功能时，直接拿来应用。简化的页面效果图如下：最开始...
总结/朱季谦
最近通过Vue + Element ui实现了动态表单功能，该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能，趁热打铁，将开发心得记录下来，方便以后再遇到类似功能时，直接拿来应用。
简化的页面效果图如下：
最开始，我是用了纯粹的el-table> 表格形式，后来发现，这种形式在提交的时候，不好对每个输入框做校验，若是el-form> 表单形式话，就可以直接通过rule设置每个输入框的验证，因此，我就在el-table> 表格里面嵌套了el-form> 表单。注意一点是，el-form-item里的 :prop="scope.$index + '.name'"需要对应el-input的 v-model="studentData[scope.$index].name"，两者都是同一个字段值。
template>
div >
div>
div>
el-button size="small" @click="addRow">
新增/el-button>
/div>
!--设置的表单-->
el-form :model="studentData" ref="data" label-width="auto">
el-table
border
:header-cell-style="{
'text-align': 'center' }
"
:cell-style="{
'text-align': 'center' }
"
:data="studentData"
ref="table"
style="width: 100%"
>
el-table-column align="center" label="姓名">
template slot-scope="scope">
!--表格里面嵌套表单-->
el-form-item
:prop="scope.$index + '.name'"
:rules="{
required: true, message: '姓名不能为空', trigger: 'blur' }
"
>
el-input
v-model="studentData[scope.$index].name"
autocomplete="off"
size="small"
placeholder="姓名"
>
/el-input>
/el-form-item>
/template>
/el-table-column>
el-table-column align="center" label="年龄">
template slot-scope="scope">
el-form-item
:prop="scope.$index + '.age'"
:rules="{
required: true, message: '年龄不能为空', trigger: 'blur' }
"
>
el-input
v-model="studentData[scope.$index].age"
autocomplete="off"
size="small"
type='number'
placeholder="收款方开户行号"
>
/el-input>
/el-form-item>
/template>
/el-table-column>
el-table-column align="center" label="性别">
template slot-scope="scope">
el-form-item
:prop="scope.$index + '.sex'"
:rules="{
required: true, message: '性别不能为空', trigger: 'blur' }
"
>
el-input
v-model="studentData[scope.$index].sex"
autocomplete="off"
size="small"
placeholder="性别"
>
/el-input>
/el-form-item>
/template>
/el-table-column>
el-table-column fixed="right" label="操作" width="100">
template slot-scope="scope">
el-button
@click="handleDeleteRow(studentData[scope.$index])"
type="text"
size="small"
>
删除/el-button
>
/template>
/el-table-column>
/el-table>
/el-form>
/div>
div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
el-button size="mini" @click="submit">
提交/el-button>
el-button size="mini" @click="resetForm()">
重置/el-button>
/div>
/div>
/template>
定义一个存储动态表格数据的数组变量
export default {
data() {
return {
studentData:[],
}
;
}
,
......
}
在methods方法里增加相关方法，分别是新增行、删除行、提交——
methods:{
/**
* 新增行
*/
addRow() {
let index = this.studentData.length ;
this.studentData.push({
key: index,
name:'',
age:'',
sex:'',
}
);
}
,
/**
* 删除行
* @param row
*/
handleDeleteRow(row){
let datas = this.studentData;
for (var i = 0;
i datas.length;
i++){
if (datas[i].key == row.key){
datas.splice(i,1);
}
}
}
,
/**
* 提交
*/
submit() {
this.$refs["data"].validate(valid =>
{
//valid为true，表示表单都已经验证通过，若为false，说明存在表单验证失败
if (valid) {
save(this.studentData).then(response =>
{
this.$message({
message: '提交成功',
type: 'success'
}
);
}
);
}
}
);
}
,
/**
* 重置
*/
resetForm() {
let datas = this.studentData;
for (var i = 0;
i datas.length;
i++){
datas[i].name='';
datas[i].age='';
datas[i].sex='';
}
}
,
}
设置表单验证规则，可统一在rules设置，也可以在每一输入框单独设置，我这里是单独在每一个输入框里设置，即:rules="{ required: true, message: '姓名不能为空', trigger: 'blur' } "就可以了，当然，还可以做一些更复杂的自定义规则。
el-table-column align="center" label="姓名">
template slot-scope="scope">
!--表格里面嵌套表单-->
el-form-item
:prop="scope.$index + '.name'"
:rules="{
required: true, message: '姓名不能为空', trigger: 'blur' }
"
>
el-input
v-model="studentData[scope.$index].name"
autocomplete="off"
size="small"
placeholder="姓名"
>
/el-input>
/el-form-item>
/template>
/el-table-column>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue + Element ui 实现动态表单，包括新增行/删除行/动态表单验证/提交功能
本文地址： https://pptw.com/jishu/506326.html