element表格+表单+表单验证结合运用

目录​​​​​​​

一、结果展示

二、实现代码

---

一、结果展示

1、图片

2、描述

table中放form表单，放输入框或下拉框或多选框等；

点击添加按钮，首先验证表单，如果存在没填的就验证提醒，都填了就向下添加一行表单表格；

点击当前行删除按钮，清除行。

二、实现代码

 <el-form :model="formother" ref="paramsForm" :rules="tablerule"><el-table :data="formother.customerAddressList" border style="width: 100%;"><el-table-column prop="consignee" label="收货人"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].consignee`" :rules=" [{ required: true, message: '请输入收货人', trigger: 'blur' }]"><el-input v-model="scope.row.consignee" placeholder="请输入收货人"></el-input></el-form-item></template></el-table-column><el-table-column prop="phone" label="联系电话"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].phone`":rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]"><el-input v-model="scope.row.phone" placeholder="请输入联系电话"></el-input></el-form-item></template></el-table-column><el-table-column prop="address" label="收货地址"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].address`":rules="[{ required: true, message: '请输入收货地址', trigger: 'blur' }]"><el-input v-model="scope.row.address" placeholder="请输入收货地址"></el-input></el-form-item></template></el-table-column><el-table-column prop="warehouse" label="仓库名称"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].warehouse`":rules="[{ required: true, message: '请输入仓库名称', trigger: 'blur' }]"><el-input v-model="scope.row.warehouse" placeholder="请输入仓库名称"></el-input></el-form-item></template></el-table-column><el-table-column label="操作" align="center" width="100"><template slot-scope="scope"><el-button type="danger" icon="el-icon-delete" size="mini"@click="deleteParams(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)}