seo网络贸易网站推广,具有价值的网站建设,南通网站建设一条龙,爱站网关键词密度原创/朱季谦
最近通过Vue Element ui实现了动态表单功能#xff0c;该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能#xff0c;趁热打铁#xff0c;将开发心得记录下来#xff0c;方便以后再遇到类似功能时#xff0c;直接拿来应用。
简化的页…原创/朱季谦
最近通过Vue Element ui实现了动态表单功能该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能趁热打铁将开发心得记录下来方便以后再遇到类似功能时直接拿来应用。
简化的页面效果图如下 最开始我是用了纯粹的表格形式后来发现这种形式在提交的时候不好对每个输入框做校验若是表单形式话就可以直接通过rule设置每个输入框的验证因此我就在表格里面嵌套了表单。注意一点是el-form-item里的 :propscope.$index .name需要对应el-input的 v-modelstudentData[scope.$index].name两者都是同一个字段值。
templatediv divdivel-button sizesmall clickaddRow新增/el-button/div!--设置的表单--el-form :modelstudentData refdata label-widthautoel-tableborder:header-cell-style{ text-align: center }:cell-style{ text-align: center }:datastudentDatareftablestylewidth: 100%el-table-column aligncenter label姓名template slot-scopescope!--表格里面嵌套表单--el-form-item:propscope.$index .name:rules{ required: true, message: 姓名不能为空, trigger: blur }el-inputv-modelstudentData[scope.$index].nameautocompleteoffsizesmallplaceholder姓名/el-input/el-form-item/template/el-table-columnel-table-column aligncenter label年龄template slot-scopescopeel-form-item:propscope.$index .age:rules{ required: true, message: 年龄不能为空, trigger: blur }el-inputv-modelstudentData[scope.$index].ageautocompleteoffsizesmalltypenumberplaceholder收款方开户行号/el-input/el-form-item/template/el-table-columnel-table-column aligncenter label性别template slot-scopescopeel-form-item:propscope.$index .sex:rules{ required: true, message: 性别不能为空, trigger: blur }el-inputv-modelstudentData[scope.$index].sexautocompleteoffsizesmallplaceholder性别/el-input/el-form-item/template/el-table-columnel-table-column fixedright label操作 width100template slot-scopescopeel-buttonclickhandleDeleteRow(studentData[scope.$index])typetextsizesmall删除/el-button/template/el-table-column/el-table/el-form/divdiv slotfooter classdialog-footer stylemargin-bottom: 10pxel-button sizemini clicksubmit提交/el-buttonel-button sizemini clickresetForm()重置/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 aligncenter label姓名template slot-scopescope!--表格里面嵌套表单--el-form-item:propscope.$index .name:rules{ required: true, message: 姓名不能为空, trigger: blur }el-inputv-modelstudentData[scope.$index].nameautocompleteoffsizesmallplaceholder姓名/el-input/el-form-item/template/el-table-column
完成以上步骤就可以快速写出一个基于Vue Element ui 实现动态表单包括新增行/删除行/动态表单验证/提交功能的逻辑。
