复杂表单校验和数据提交方案

本文是在 vue+elementUI 复杂表单的验证、数据提交方案 基础上写的。

在原文实现的基础上加了2点：

1. 子form的校验失败错误信息传递到父form并显示消息通知。
2. 添加form内嵌table的校验，且实现table中数据之间的关联校验。

代码地址

错误信息传递

validate () {
  return new Promise((resolve, reject) => {
    this.$refs.ruleForm.validate((valid, field) => {
      console.log(valid, field)
	    if (valid) {
	      resolve(true)
	    } else {
          // 获取报错信息
	      reject(new Error(Object.values(field)[0][0].message))
	    }
	  })
    })
}

table关联校验

// prop赋值包含index信息
<el-table-column label="姓名"
                 width="180">
  <template slot-scope="scope">
    <el-form-item :prop="'tableData.' + scope.$index + '.name'"
                  :rules="rules.name">
      <el-input v-model="scope.row.name"
                autocomplete="off"></el-input>
    </el-form-item>
  </template>
</el-table-column>

// rules 校验
name: [
  {
    validator: (rule, value, callback) => {
      // 通过prop解析出当前行 
      const row = +rule.field.split('.')[1]
      // 可以获取到当前行model 具体逻辑可自定义
      console.log(`name validator row:${row} name:${value} address:${this.ruleForm.tableData[row].address}`)
      if (value === '') {
        callback(new Error('请输入姓名'))
        return
      }
      callback()
    }
  }
]