elementUI之el-table实现行内验证详解

这类代码网上很多，只是没有人详细讲解其中的细节和关键点，所以很多人把代码拿过去就不好使，我就是其中之一，所以要记录一下。

<template >
  <el-form :model="form" ref="form" :rules="formRules" size="small">
    <el-table :data="form.userList">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="{row, $index}">
          <el-form-item :prop="`userList.${$index}.name`" :rules='formRules.name'>
            <el-input v-model="row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
export default {

  data () {
    return {
      form: {
        userList: [
          {
            id: 1,
            name: '张三'
          },
          {
            id: 2,
            name: ''
          }
        ]
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
  }
}
</script>

上面的代码，与我们平时使用table时略有不同，不同之处就是 data 绑定的 数据源并不是一个独立的变量。

注意，userList 是保存的用户列表数据，如果不把userList放进form里，而是直接定义一个单独的变量，那么你可以洗洗睡了，因为你再怎么折腾，也是不可能成功的，因为逻辑上讲不通！！！

要做表单验证，首先得有表单，然后表单里面有待验证的元素，这样表单验证才能正常工作，逻辑上也能讲的通。

而如果我把userList单独 拿出来定义成一个独立的变量，那它与form表单就没有一毛钱关系了。

没理解的朋友，仔细读几遍，重点搞清楚为什么userList必须放在表单里面。

这就像我们定义一个普通的表单：

form: {
  name: '张三',
  age: 38
}

name和age字段一定是要放在 form 里面的，放在外面的话，那他俩就谁也不认识谁了，更没法做表单验证。

而要在el-table中做表单必填验证，也是同理，必须把table的数据扔进form表单中才能进行验证，所不同的是，平时我们验证的是form里面的某一个字段，而现在我们要验证的是form里面某一个字段（列表）中的字段。

逻辑讲通了，问题也就明确了，不是我们在网上抄的代码不管用，也不是我们语法有错误，更不是我们的VUE框架版本和人家不一样，而是我们自己陷入了逻辑的误区。