目錄???????

一、結(jié)果展示

二、實(shí)現(xiàn)代碼

一、結(jié)果展示

1、圖片

2、描述

table中放form表單，放輸入框或下拉框或多選框等；

點(diǎn)擊添加按鈕，首先驗(yàn)證表單，如果存在沒填的就驗(yàn)證提醒，都填了就向下添加一行表單表格；

點(diǎn)擊當(dāng)前行刪除按鈕，清除行。

二、實(shí)現(xiàn)代碼

 <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: '請(qǐng)輸入收貨人', trigger: 'blur' }]"><el-input v-model="scope.row.consignee" placeholder="請(qǐng)輸入收貨人"></el-input></el-form-item></template></el-table-column><el-table-column prop="phone" label="聯(lián)系電話"><template slot-scope="scope"><el-form-item :prop="`customerAddressList[${scope.$index}].phone`":rules="[{ required: true, message: '請(qǐng)輸入聯(lián)系電話', trigger: 'blur' }]"><el-input v-model="scope.row.phone" placeholder="請(qǐng)輸入聯(lián)系電話"></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: '請(qǐng)輸入收貨地址', trigger: 'blur' }]"><el-input v-model="scope.row.address" placeholder="請(qǐng)輸入收貨地址"></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: '請(qǐng)輸入倉庫名稱', trigger: 'blur' }]"><el-input v-model="scope.row.warehouse" placeholder="請(qǐng)輸入倉庫名稱"></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)}