a-form-model表单中a-table组件1.实现添加行功能2.a-form-model-item 增加行实现必填校验功能,动态设置prop3.提交时触发必填校验并提示信息
时间: 2023-11-27 13:53:42 浏览: 342
JavaScript动态创建form表单并提交的实现方法
1. 要在 a-table 组件中添加行,你需要在 data 中定义一个数组用来存储表格中的数据。然后,你可以通过点击按钮或其他事件来触发一个方法,将新的数据添加到数组中,同时更新表格的数据源。以下是一个简单的示例:
```html
<a-table :dataSource="dataSource">
<a-table-column title="姓名" dataIndex="name"></a-table-column>
<a-table-column title="年龄" dataIndex="age"></a-table-column>
<a-table-column title="操作" width="100">
<template slot="customRender" slot-scope="text, record, index">
<a @click="addRow(index)">添加</a>
</template>
</a-table-column>
</a-table>
<button @click="addRow(-1)">添加</button>
<script>
export default {
data() {
return {
dataSource: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 }
]
}
},
methods: {
addRow(index) {
if (index === -1) {
this.dataSource.push({ name: '', age: '' })
} else {
this.dataSource.splice(index + 1, 0, { name: '', age: '' })
}
}
}
}
</script>
```
2. 要动态设置 a-form-model-item 组件的 prop,你可以通过 v-bind 指令来实现。例如,你可以在添加行时动态设置字段名为 `name_${index}` 的表单项必填:
```html
<a-table :dataSource="dataSource">
<a-table-column title="姓名" dataIndex="name"></a-table-column>
<a-table-column title="年龄" dataIndex="age"></a-table-column>
<a-table-column title="操作" width="100">
<template slot="customRender" slot-scope="text, record, index">
<a @click="addRow(index)">添加</a>
</template>
</a-table-column>
</a-table>
<a-form-model :model="formData" :rules="formRules" ref="form">
<a-form-model-item v-for="(item, index) in dataSource" :key="index" :label="'姓名' + (index + 1)" :prop="'name_' + index" :rules="[{
required: true,
message: '请输入姓名',
trigger: 'blur'
}]">
<a-input v-model="item.name" />
</a-form-model-item>
<a-form-model-item v-for="(item, index) in dataSource" :key="index" :label="'年龄' + (index + 1)" :prop="'age_' + index">
<a-input-number v-model="item.age" />
</a-form-model-item>
</a-form-model>
<script>
export default {
data() {
return {
dataSource: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 }
],
formData: {},
formRules: {}
}
},
methods: {
addRow(index) {
if (index === -1) {
this.dataSource.push({ name: '', age: '' })
} else {
this.dataSource.splice(index + 1, 0, { name: '', age: '' })
}
this.$set(this.formData, `name_${index + 1}`, '')
this.$set(this.formRules, `name_${index + 1}`, {
required: true,
message: '请输入姓名',
trigger: 'blur'
})
}
}
}
</script>
```
3. 要在提交表单时触发必填校验并提示信息,你可以使用 a-form-model 的 validate 方法进行校验,并在回调函数中处理校验结果。例如:
```html
<a-table :dataSource="dataSource">
<a-table-column title="姓名" dataIndex="name"></a-table-column>
<a-table-column title="年龄" dataIndex="age"></a-table-column>
<a-table-column title="操作" width="100">
<template slot="customRender" slot-scope="text, record, index">
<a @click="addRow(index)">添加</a>
</template>
</a-table-column>
</a-table>
<a-form-model :model="formData" :rules="formRules" ref="form">
<a-form-model-item v-for="(item, index) in dataSource" :key="index" :label="'姓名' + (index + 1)" :prop="'name_' + index" :rules="[{
required: true,
message: '请输入姓名',
trigger: 'blur'
}]">
<a-input v-model="item.name" />
</a-form-model-item>
<a-form-model-item v-for="(item, index) in dataSource" :key="index" :label="'年龄' + (index + 1)" :prop="'age_' + index">
<a-input-number v-model="item.age" />
</a-form-model-item>
</a-form-model>
<button @click="submitForm">提交</button>
<script>
export default {
data() {
return {
dataSource: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 }
],
formData: {},
formRules: {}
}
},
methods: {
addRow(index) {
if (index === -1) {
this.dataSource.push({ name: '', age: '' })
} else {
this.dataSource.splice(index + 1, 0, { name: '', age: '' })
}
this.$set(this.formData, `name_${index + 1}`, '')
this.$set(this.formRules, `name_${index + 1}`, {
required: true,
message: '请输入姓名',
trigger: 'blur'
})
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log('表单校验通过')
// 提交表单
} else {
console.log('表单校验未通过')
// 提示错误信息
}
})
}
}
}
</script>
```
阅读全文