Combination of element form + form + form validation

directory

1. Results display

Two, implement the code

---

1. Results display

1. Picture

2. Description

Put the form form in the table, put the input box or drop-down box or multi-select box, etc.;

Click the Add button, first verify the form, if there are any unfilled ones, verify the reminder, and add a row of form forms down if they are all filled;

Click the current row delete button to clear the row.

Two, implement the code

 <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)
    }