element ui表格的校验和自定义校验规则

<!-- * @Description: element ui表格校验 由于最近太多人问这个需要怎么校验所以贴了一个demo供参考 * @Version: 2.0 * @Autor: lhl * @Date: 2020-01-15 11:15:40 * @LastEditors: lhl * @LastEditTime: 2020-05-08 09:21:48 -->
<template>
  <div>
    <el-form :model="tableForm" ref="tableForm">
      <el-table :data="tableForm.tableData" border style="width: 100%"
      >
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="tableRules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="年龄">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.age`" :rules="tableRules.age">
              <el-input v-model="scope.row.age"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="电话">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.phone`" :rules="tableRules.phone">
              <el-input v-model="scope.row.phone"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div>
      <el-button type="primary" @click="submitForm('tableForm')">提交</el-button>
      <el-button @click="resetForm('tableForm')">重置</el-button>
    </div>
  </div>
</template>

<script> export default { data() { // 自定义校验规则
    var checkPhone = (rule, value, callback) => {   let reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/   if (!reg.test(value)) {     callback(new Error('请输入正确号码'))   } else {     callback()   } } return { tableForm: { tableData: [ { name: "", age: "", phone: "" } ] }, tableRules: { // 姓名
 name: [ { required: true, message: "请输入姓名" , trigger: 'blur' }, { max: 20, message: "长度在20个字符以内" , trigger: 'blur' } ], //年龄
 age: [ { required: true, message: "请输入年龄", trigger: 'blur' }, { max: 20, message: "长度在20个字符以内", trigger: 'blur' } ], //电话
 phone: [ { required: true, message: "请输入电话", trigger: 'blur' }, { validator: checkPhone, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script>