a-table配合表单a-form-model-item,增加新增行时实现必填项校验
时间: 2023-08-10 13:05:35 浏览: 659
可以通过监听表单的添加行事件,在新增一行时,手动进行必填项校验。具体实现可以参考以下代码:
```html
<template>
<a-table :data-source="tableData" @addRow="handleAddRow">
<a-form-model-item label="姓名" prop="name" required>
<a-input v-model="item.name" />
</a-form-model-item>
<a-form-model-item label="年龄" prop="age" required>
<a-input-number v-model="item.age" />
</a-form-model-item>
<a-form-model-item label="地址" prop="address" required>
<a-input v-model="item.address" />
</a-form-model-item>
</a-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, address: '北京' },
{ name: '李四', age: 30, address: '上海' }
],
item: {}
}
},
methods: {
handleAddRow() {
// 新增一行时,手动进行必填项校验
this.$refs.form.validate(valid => {
if (valid) {
this.tableData.push(this.item)
this.item = {}
}
})
}
}
}
</script>
```
在上面的示例中,我们使用了 `a-table` 和 `a-form-model-item` 来实现表格和表单的结合。在表单中,我们使用了 `required` 属性来标识该项为必填项。在新增一行时,我们通过监听 `addRow` 事件来触发 `handleAddRow` 方法,在该方法中,我们通过手动调用表单的校验方法 `validate` 来进行必填项校验。如果校验通过,则将新增的数据添加到表格数据源中。如果校验失败,则不进行任何操作。
阅读全文