vue实现动态增加表格input框，并且提交时校验表格的数据

作为后台研发写js和样式就头大，但是后台管理往往不需要前端人员的参与，后来学习了vue发现功能太强大，省心省力，不仅bug减少，页面交互也友好；写一个页面比原来提高了效率。喜欢！！！
以下是我遇到的问题之一，并且查阅别人的解决办法，总结下来：
在实现动态增加表格input框，并且提交时校验表格的数据；重点在于prop绑定的对象；

 <el-table
          :data="formData.tableDataList" >
<el-form-item
                :prop="'tableDataList.' + scope.$index + '.code'"
                :rules="formData.rules.code"
              >          

以及

<el-form
        ref="dataForm"
        :rules="formData.rules"
        :model="formData"
        style="width: 80%; margin-left:50px;"
      >

<template>
  <div class="app-container">
    <el-dialog
      title="设置"
      :visible="editVisible"
      width="65%"
      append-to-body
      :before-close="close"
    >
      <!-- append-to-body用于弹出框的层叠处理 -->
      <!-- <el-button @click="addServer">添加行数</el-button> -->
      <el-form
        ref="dataForm"
        :rules="formData.rules"
        :model="formData"
        style="width: 80%; margin-left:50px;"
      >
        <!-- label-width="120px"  注意页面样式会影响显示，我当时采坑点就是在form里添加了这两个属性结果一直不显示添加的input，花了2个小时找问题的原因，且行且思考，且总结-->
        <!-- label-position="left" -->
        <div class="container">
          <el-alert title="" type="error" :closable="false">
            <el-button type="primary" @click="addServer()">
              增加
            </el-button>
          </el-alert>
        </div>
        <!-- 表格 :data="tableDataList"-->
        <el-table
          :data="formData.tableDataList"
          border
          id="el-table"
          style="width: 100%"
        >
          <el-table-column prop="id" label="id">
            <template scope="scope">
              <span v-html="scope.row.id"> </span>
            </template>
          </el-table-column>
          <el-table-column label="标识符">
            <template slot-scope="scope">
              <!-- {{'tableDataList.' + scope.$index + '.code'}} -->
              <el-form-item
                :prop="'tableDataList.' + scope.$index + '.code'"
                :rules="formData.rules.code"
              >
                <el-input
                  size="small"
                  v-model="scope.row.code"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称">
            <template scope="scope">
              <el-form-item
                :prop="'tableDataList.' + scope.$index + '.name'"
                :rules="formData.rules.name"
              >
                <el-input
                  size="small"
                  v-model="scope.row.name"
                  placeholder="请输入内容"
                  @blur="handleEdit(scope.$index, scope.row)"
                >
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240px">
            <template slot-scope="scope">
              <el-button
                type="warning"
                @click="deleteList(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="createData()">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryAreaList, editArea, delServer } from "./cardGameBrand.js";

let validTextLength = (rule, value, callback) => {
  if (value < 0 || value > 50) {
    callback(new Error("文本长度必须为数字且大于0且小等于50！"));
  } else {
    callback();
  }
};
export default {
  name: "CardShopDistrictEdit",
  props: {
    editvisible: {
      type: Boolean,
      default: false
    },
    editstatus: {
      type: String,
      default: ""
    }
  },
  // 定义一个cardShopDistrict对象 用于双向绑定， 代码生成这个对象即可 就是表名
  data() {
    return {
      // cardShopDistrict: {},
      formData: {
        rules: {
          code: [
            {
              type: "string",
              required: true,
              message: "标识符不能为空",
              trigger: "blur"
            }
          ],
          name: [
            {
              type: "string",
              required: true,
              message: "名称不能为空",
              trigger: "blur"
            }
          ]
        },
        tableDataList: []
      },
      // rules: {
      //   code: [{ required: true, message: "规则id不能为空", trigger: "blur" }],
      //   name: [{ required: true, message: "规则不能为空", trigger: "blur" }]
      // },
      editVisible: false,
      tableDataList: [],
      maxNumber: 0,
      brandId: 0,
      pid: 0
    };
  },
  watch: {
    editvisible: function(val, oldVal) {
      this.editVisible = val;
    },
    editstatus: function(val, oldVal) {
      this.editStatus = val;
    },
    editVisible: function(val, oldVal) {
      this.$emit("update:editvisible", val);
    }
  },
  methods: {
    close() {
      this.$emit("SettingRefreshListEvent");
    },
    clearValidate() {
      this.$refs["dataForm"].clearValidate();
    },
    validNumber(val) {
      var regex = /^[0-9]\d*$/;
      if (val != null && val != "") {
        return regex.test(val);
      }
      return false;
    },
    setServerParam(row) {
      this.maxNumber = 0;
      this.brandId = row.newBrandId;
      this.pid = row.id;
      this.formData.tableDataList = [];
    },
    getAreaList() {
      queryAreaList({ brandId: this.brandId, pid: this.pid })
        .then(response => {
          let res = response.data;
          if (res) {
            this.formData.tableDataList = res.rows;
          }
        })
        .catch(err => {
          console.log("getAreaList err:" + err);
        });
    },
    addServer() {
      ++this.maxNumber;
      let arr = {};
      arr.code = "111";
      arr.name = "333";
      arr.rfId = this.maxNumber;
      this.formData.tableDataList.push(arr);
      console.log(this.formData.tableDataList[0]);
    },
    //删除一列
    deleteList(index, row) {
      // debugger
      console.log(row.rfId);
      if (row.rfId) {
        // var index = this.formData.tableDataList.findIndex(ele => {
        //   if (ele.rfId === row.rfId) {
        //     return true;
        //   }
        // });
        this.formData.tableDataList.splice(index, 1);
        return;
      }

      //已保存的数据直接删除
      MessageBox.confirm("确定要删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delServer({ id: row.id })
          .then(response => {
            this.$notify({
              title: "成功",
              message: "删除成功！",
              type: "success",
              duration: 2000
            });

            this.getAreaList();
          })
          .catch(err => {
            console.log("delArea err:" + err);
          });
      });
    },
    createData() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          //校验
          let oldData = [];
          let newData = [];
          //  this.tableDataList.filter()
          let a = [...new Set(this.tableDataList)];
          debugger;
          return;
          this.dataForm.tableDataList.forEach(ele => {
            if (ele.id && !ele.rfId) {
              //存储过数据库的数据
              oldData.push(ele);
            } else {
              newData.push(ele);
            }
          });
          // alert(JSON.stringify(newData)+""+brandId)
          editArea({
            oldParamList: JSON.stringify(oldData),
            newParamList: JSON.stringify(newData),
            brandId: this.query.brandId,
            categoryId: this.categoryId
          })
            .then(() => {
              this.$notify({
                title: "成功",
                message: "增加成功！",
                type: "success",
                duration: 2000
              });
              this.$emit("SettingRefreshListEvent");
            })
            .catch(err => {
              this.$notify({
                title: "失败",
                message: "增加失败！" + err,
                type: "error",
                duration: 2000
              });
            });
        }
      });
    }
  }
};
</script>


>>

其实rules可以放在formData对象的外面，但是规范数据结构，也放大了formData里；大家参考即可。
参考博客