el-table children中的input 无法匹配prop值 进行el-form校验
如果你想在el-table中使用el-form校验,可以使用以下方法:
1.在el-table的列定义中,使用scoped slot来自定义每个单元格的内容,将input组件放在其中,并将v-model绑定到数据源中的相应属性:
<template>
<el-table :data="tableData">
<el-table-column label="Username">
<template slot-scope="scope">
<el-form-item prop="username">
<el-input v-model="scope.row.username"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="Email">
<template slot-scope="scope">
<el-form-item prop="email">
<el-input v-model="scope.row.email"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</template>
2.在el-form中使用ref属性给表格命名,并在提交时调用该表格的validate方法进行校验:
<template>
<el-form :model="form" ref="myTable">
<el-table :data="tableData">
...
</el-table>
<el-button @click="submitForm">Submit</el-button>
</el-form>
</template>
<script>
export default {
methods: {
submitForm() {
this.$refs.myTable.validate((valid) => {
if (valid) {
// 校验通过,提交表单
} else {
// 校验失败,处理错误
}
});
},
},
}
</script>
3.在el-form-item中使用prop属性来指定要校验的字段名,该名称应与数据源中的属性名称相同。如果prop属性值不匹配,将无法进行校验。
注意:在使用el-table时,需要确保给表格传递一个唯一的key属性,以便在数据更新时正确地渲染和更新表格
原文地址: http://www.cveoy.top/t/topic/hmoo 著作权归作者所有。请勿转载和采集!