这可能是因为el-table的行编辑模式下,会将输入框的值绑定到行数据的属性中,而不是直接绑定到表单数据中。因此,el-form无法直接校验这些输入框的值。

解决方法是在行编辑模式下,手动触发表单的校验方法。在el-table的@edit-start或@edit-end事件中,调用el-form的validate方法即可。示例代码如下:

<el-table :data="tableData" @edit-start="onEditStart" @edit-end="onEditEnd">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="[ { required: true, message: '请输入姓名' } ]">
        <el-input v-model="scope.row.name" />
      </el-form-item>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      <el-form-item :prop="'tableData.' + scope.$index + '.age'" :rules="[ { required: true, message: '请输入年龄' } ]">
        <el-input v-model="scope.row.age" />
      </el-form-item>
    </template>
  </el-table-column>
</el-table>

...

methods: {
  onEditStart() {
    this.$refs.form.validate()
  },
  onEditEnd() {
    this.$refs.form.validate()
  }
}

在上面的示例中,我们使用了el-form-item的prop属性来指定校验规则和绑定数据。在onEditStart和onEditEnd事件中,调用el-form的validate方法触发表单的校验。注意,这里我们需要给el-form添加一个ref属性,以便在方法中引用

el-table children中的input 无法执行el-form校验

原文地址: http://www.cveoy.top/t/topic/hmod 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录