石家庄城乡建设网站,西安网站建设兼职,企业263邮箱登录入口,哪个网站上做ppt比较好看的一、背景
页面需要用到表格采集用户数据#xff0c;提交时进行表单校验#xff1b;即表格中嵌套着表单#xff0c;保存时进行表单校验
二、功能实现
2.1、el-form和el-table嵌套说明 ① :modelformData 给表单绑定数据#xff0c;formData是表单的数据对象 …一、背景
页面需要用到表格采集用户数据提交时进行表单校验即表格中嵌套着表单保存时进行表单校验
二、功能实现
2.1、el-form和el-table嵌套说明 ① :modelformData 给表单绑定数据formData是表单的数据对象 ② 表单数据对象formData中定义的tableData是表单内嵌套的表格显示数据 ③ rules为表单绑定的校验规则 ④ :proptableData. scope.$index .name 绑定传入Form 组件的 model 中对应的字段name ⑤ :rulesrules.name 绑定表单校验规则 ⑥ 整个html结构是一个大表单 el-form里边嵌套的el-table而el-table中又嵌套了表单项 el-form-item支持编辑。 备注大多情况下prop会按照惯有思维直接写入字段而这里是动态绑定的另外一定要记得每项动态写入rules来进行绑定表单校验 2.2、具体代码
templatedivel-form:modelformDatarefformRef:rulesruleslabel-width108px:inlinetrueel-table:dataformData.tableDatastylewidth: 100% borderel-table-column typeindex width55 aligncenter/el-table-columnel-table-column label姓名 propname resizable aligncenter header-aligncentertemplate slot-scopescopeel-form-item :proptableData. scope.$index .name :rulesrules.nameel-input typetext sizesmall placeholder请输入姓名 v-modelscope.row.name/el-input/el-form-item/template/el-table-columnel-table-column label年龄 propage resizable aligncenter header-aligncentertemplate slot-scopescopeel-form-item :proptableData. scope.$index .age :rulesrules.ageel-input typetext sizesmall placeholder请输入年龄 v-modelscope.row.age/el-input/el-form-item/template/el-table-columnel-table-column label性别 propsex resizable aligncenter header-aligncentertemplate slot-scopescopeel-form-item :proptableData. scope.$index .sex :rulesrules.sexel-input typetext sizesmall placeholder请输入性别 v-modelscope.row.sex/el-input/el-form-item/template/el-table-column/el-tableel-form-item classfooterel-button typeprimary clicksave保存/el-buttonel-button取消/el-button/el-form-item/el-form/div
/templatescript
export default{data(){return{formData:{tableData:[{name:张三,age:18,sex:},{name:李四,age:19,sex:},]},rules:{name:[{ required: true, message: 请输入姓名, trigger: blur },],age:[{ required: true, message: 请输入年龄, trigger: blur },],sex:[{ required: true, message: 请输入性别, trigger: blur },],}}},methods:{//保存save(){this.$refs.formRef.validate((valid) {console.log(valid,valid);if(valid){//如果valid为true表示校验通过可以提交表单调取接口进行保存console.log(表单校验通过);}else {this.$message.warning(请填写完整的数据);}})},}
}
/scriptstyle langscss scoped
.footer{margin-top: 50px;
}
/style
三、实际项目应用
3.1、增加添加与删除操作
需求表格增加操作项具有添加和删除按钮第一项无法删除点击添加时动态增加表格的行数点击删除的时候删除表格的行数据。
3.2、添加和删除代码
结构直接添加一个表格项
el-table-column label操作 resizable aligncenter header-aligncentertemplate slot-scope{$index}el-button typeprimary iconel-icon-plus circle clickaddTable() v-if$index 0/el-buttonel-button iconel-icon-minus circle clickdelTable($index) v-if$index 0/el-button/template
/el-table-column
methods:{//添加addTable(){let newArr [{name:,age:,sex:}]this.formData.tableData.push(...newArr)},//删除delTable(i){this.formData.tableData.splice(i,1)}
}
3.3、完整代码
templatedivel-form:modelformDatarefformRef:rulesruleslabel-width108px:inlinetrueel-table:dataformData.tableDatastylewidth: 100% borderel-table-column typeindex width55 aligncenter/el-table-columnel-table-column label姓名 propname resizable aligncenter header-aligncentertemplate slot-scopescopeel-form-item :proptableData. scope.$index .name :rulesrules.nameel-input typetext sizesmall placeholder请输入姓名 v-modelscope.row.name/el-input/el-form-item/template/el-table-columnel-table-column label年龄 propage resizable aligncenter header-aligncentertemplate slot-scopescopeel-form-item :proptableData. scope.$index .age :rulesrules.ageel-input typetext sizesmall placeholder请输入年龄 v-modelscope.row.age/el-input/el-form-item/template/el-table-columnel-table-column label性别 propsex resizable aligncenter header-aligncentertemplate slot-scopescopeel-form-item :proptableData. scope.$index .sex :rulesrules.sexel-input typetext sizesmall placeholder请输入性别 v-modelscope.row.sex/el-input/el-form-item/template/el-table-columnel-table-column label操作 resizable aligncenter header-aligncentertemplate slot-scope{$index}el-button typeprimary iconel-icon-plus circle clickaddTable() v-if$index 0/el-buttonel-button iconel-icon-minus circle clickdelTable($index) v-if$index 0/el-button/template/el-table-column/el-tableel-form-item classfooterel-button typeprimary clicksave保存/el-buttonel-button取消/el-button/el-form-item/el-form/div
/templatescript
export default{data(){return{formData:{tableData:[{name:张三,age:18,sex:男},{name:李四,age:19,sex:},]},rules:{name:[{ required: true, message: 请输入姓名, trigger: blur },],age:[{ required: true, message: 请输入年龄, trigger: blur },],sex:[{ required: true, message: 请输入性别, trigger: blur },],}}},methods:{//保存save(){this.$refs.formRef.validate((valid) {console.log(valid,valid);if(valid){//如果valid为true表示校验通过可以提交表单调取接口进行保存console.log(表单校验通过);}else {this.$message.warning(请填写完整的数据);}})},//添加addTable(){let newArr [{name:,age:,sex:}]this.formData.tableData.push(...newArr)},//删除delTable(i){this.formData.tableData.splice(i,1)}}
}
/scriptstyle
.footer{margin-top: 50px;
}
/style3.4、实际效果 最后
