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(vaild => {
        if (!vaild) return;
        this.formother.customerAddressList.push({
          consignee: "",
          phone: "",
          address: "",
          warehouse: ""
        })
      })
    },
    deleteParams(index) {
      this.formother.customerAddressList.splice(index, 1)
    }