el-table children中的input 无法执行el-form校验
这可能是因为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属性,以便在方法中引用
原文地址: http://www.cveoy.top/t/topic/hmod 著作权归作者所有。请勿转载和采集!