elementui中对表格中每行输入框做表单校验

你可以使用 elementui 中的表单校验来对表格中的每行输入框进行校验。

首先，在表格中定义每行输入框时，需要使用 `el-form-item` 组件包裹每个输入框，并设置 `prop` 属性，用于在校验时区分不同的输入框。

例如：

<el-table>
  <el-table-column prop="name" label="名称">
    <template slot-scope="scope">
      <el-form-item prop="name">
        <el-input v-model="scope.row.name"></el-input>
      </el-form-item>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      <el-form-item prop="age">
        <el-input v-model="scope.row.age"></el-input>
      </el-form-item>
    </template>
  </el-table-column>
</el-table>

然后，在表单中添加 `el-form` 组件，并设置 `ref` 属性，用于在代码中获取表单对象。同时，还需要为每个输入框设置校验规则，并在表单校验时调用校验方法。

例如：

<el-form ref="form" :model="formData" :rules="formRules">
  <el-table>
    ...
  </el-table>
</el-form>

data() {
  return {
    formData: [
      { name: '张三', age: 18 },
      { name: '李四', age: 20 }
    ],
    formRules: {
      name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
      ]
    }
  }
},
methods: {
  validateForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 校验通过，提交表单
      } else {
        // 校验失败，提示错误信息
      }
    })
  }
}

在上面的代码中，`formData` 数组中包含了表格中每行的数据，`formRules` 对象中定义了每个输入框的校验规则。在 `validateForm` 方法中，调用了表单的校验方法 `validate`，并在回调函数中根据校验结果进行处理。

需要注意的是，由于表格中的每行输入框是动态生成的，因此需要在每次表格数据发生变化时重新设置校验规则，可以在 `watch` 中监听数据变化，然后调用 `resetFields` 方法重置表单，再设置新的校验规则。

例如：

watch: {
  formData: {
    deep: true,
    handler() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.$refs.form.clearValidate()
        this.setRules()
      })
    }
  }
},
methods: {
  setRules() {
    const rules = {}
    this.formData.forEach((item, index) => {
      rules[`name.${index}`] = [
        { required: true, message: '请输入名称', trigger: 'blur' }
      ]
      rules[`age.${index}`] = [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
      ]
    })
    this.formRules = rules
  }
}

在上面的代码中，`setRules` 方法根据表格数据动态生成校验规则，然后通过 `this.formRules = rules` 将校验规则设置到表单中。在 `watch` 中监听 `formData` 变化时，调用 `this.setRules()` 方法重新设置校验规则。同时，调用 `this.$refs.form.resetFields()` 方法重置表单，以清除之前的校验状态。