table中加表单元素每行怎么验证_elementui表格动态新增行验证无效?
时间: 2023-07-31 20:10:18 浏览: 98
如果您使用 Element UI 中的表格组件,可以通过使用表单验证来对添加的表格行进行验证。
首先,您需要在表格中设置 `ref` 属性,以便在验证时可以访问表格组件。例如:
```html
<el-table ref="myTable">
<!-- 表格内容 -->
</el-table>
```
接下来,您需要在表格列的定义中添加 `rules` 属性,用于指定每个单元格的验证规则。例如:
```html
<el-table-column prop="name" label="姓名" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"></el-table-column>
```
在上面的例子中,我们使用 `rules` 属性来指定 `name` 列的验证规则。如果该单元格为空,将显示 "请输入姓名" 错误消息。
最后,您需要在添加新行时手动触发表单验证。例如:
```js
this.$refs['myTable'].validateRow(index, (valid) => {
if (valid) {
// 行验证通过,继续添加新行
} else {
// 行验证失败,提示错误消息
}
});
```
在上面的例子中,我们使用 `validateRow` 方法手动触发对新行的验证。如果验证通过,可以继续添加新行;否则,将显示错误消息。
希望这些信息对您有所帮助。如果您仍然遇到问题,请提供更多细节或代码示例,以便我们更好地理解您的问题。
阅读全文