嘉兴手机网站制作,wordpress 归类插件,手机百度引擎搜索入口,在线设计海报网站一、结果展示
1、图片 2、描述
table中放form表单#xff0c;放输入框或下拉框或多选框等#xff1b;
点击添加按钮#xff0c;首先验证表单#xff0c;如果存在没填的就验证提醒#xff0c;都填了就向下添加一行表单表格#xff1b;
点击当前行删除按钮#xff0c;…一、结果展示
1、图片 2、描述
table中放form表单放输入框或下拉框或多选框等
点击添加按钮首先验证表单如果存在没填的就验证提醒都填了就向下添加一行表单表格
点击当前行删除按钮清除行。
二、实现代码 el-form :modelformother refparamsForm :rulestableruleel-table :dataformother.customerAddressList border stylewidth: 100%;el-table-column propconsignee label收货人template slot-scopescopeel-form-item :propcustomerAddressList[${scope.$index}].consignee :rules [{ required: true, message: 请输入收货人, trigger: blur }]el-input v-modelscope.row.consignee placeholder请输入收货人/el-input/el-form-item/template/el-table-columnel-table-column propphone label联系电话template slot-scopescopeel-form-item :propcustomerAddressList[${scope.$index}].phone:rules[{ required: true, message: 请输入联系电话, trigger: blur }]el-input v-modelscope.row.phone placeholder请输入联系电话/el-input/el-form-item/template/el-table-columnel-table-column propaddress label收货地址template slot-scopescopeel-form-item :propcustomerAddressList[${scope.$index}].address:rules[{ required: true, message: 请输入收货地址, trigger: blur }]el-input v-modelscope.row.address placeholder请输入收货地址/el-input/el-form-item/template/el-table-columnel-table-column propwarehouse label仓库名称template slot-scopescopeel-form-item :propcustomerAddressList[${scope.$index}].warehouse:rules[{ required: true, message: 请输入仓库名称, trigger: blur }]el-input v-modelscope.row.warehouse placeholder请输入仓库名称/el-input/el-form-item/template/el-table-columnel-table-column label操作 aligncenter width100template slot-scopescopeel-button typedanger iconel-icon-delete sizeminiclickdeleteParams(scope.$index)删除/el-button/template/el-table-column/el-table/el-form addAddress() {this.$refs[paramsForm].validate().then(vaild {if (!vaild) return;this.formother.customerAddressList.push({consignee: ,phone: ,address: ,warehouse: })}).catch(error {console.log(error)})},deleteParams(index) {this.formother.customerAddressList.splice(index, 1)}
