elementui表单套表格 动态验证

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-table :data="form.tableData" style="width: 100%">
        <el-table-column label="日期" width="300">
          <template slot-scope="scope">
            <el-form-item
              label="单价"
              :prop="'tableData.' + scope.$index + '.price'"
              :rules="rules.price"
            >
              <el-input v-model="scope.row.price"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="300">
          <template slot-scope="scope">
            <el-form-item
              label="数量"
              :prop="'tableData.' + scope.$index + '.num'"
              :rules="rules.num"
            >
              <el-input v-model="scope.row.num"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div @click="add()">添加</div>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validatePrice = (rule, value, callback, obj) => {
      let arr = Object.keys(obj)[0].split(".");

      if (value === "") {
        callback(new Error("请输入单价"));
      } else {
        if (this.form[arr[0]][arr[1]].num == "") {
          this.$refs.ruleForm.validateField("tableData." + arr[1] + ".num");
        }else{
          callback();
        }
      }
    };
    var validateNum = (rule, value, callback, obj) => {
      let arr = Object.keys(obj)[0].split(".");
      console.log(arr);
      if (this.form[arr[0]][arr[1]].price > 10) {
        if (value === "") {
          callback(new Error("请输入数量"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      form: {
        tableData: [
          {
            price: "",
            num: "",
          },
        ],
      },

      rules: {
        price: [{ validator: validatePrice, trigger: ["blur", "change"] }],
        num: [{ validator: validateNum, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add() {
      this.form.tableData.push({
        price: "",
        num: "",
      });
    },
  },
};
</script>
<style scoped></style>

代码简单，不详细解释