单层循环
HTML
- 对form绑定ref和model
- 循环项为item,下标为index(可换,不重要)
- 改变form-item的name为数组形式,第一个参数为循环列表的名字,第二个参数为index,第三个参数为此项标识。
- 输入控件绑定model为 item.此项标识
<a-form ref="validationFormRef" :model="validationForm">
<template v-for="(item, index) in validationForm.list" :key="item.id">
<a-form-item :name="['list', index, 'num']" label="个数" :rules="[intRule]">
<a-input-number v-model:value="item.num" />
</a-form-item>
</template>
</a-form>
TS
- 定义ref、model
import type { FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
export default defineComponent({
setup() {
const validationFormRef = ref<FormInstance | null>(null);
const validationForm = reactive<any>({
list: [.......], // 循环的列表
});
const isInteger = (_: Rule, value: any) => {
// 判断是否为正整数
const r = /^[1-9][0-9]*$/;
if (value && !r.test(value.toString())) {
return Promise.reject(new Error('请输入正整数!'));
}
return Promise.resolve();
};
const intRule: Rule = { validator: isInteger, trigger: 'change' };
const hasFormError = async () => {
// 表单验证
let values;
try {
values = await validationFormRef.value?.validateFields();
} catch (errorInfo) {
console.log(errorInfo);
}
return !values;
},
return {
validationFormRef,
validationForm,
intRule,
}
}
也可以利用组件自带的参数去格式化
formatter
没有提示了,但是输入小数会自动四舍五入
<a-input-number
v-model:value="item.size"
placeholder="请输入"
type="number"
:min="1"
:default-value="1"
:formatter="formatterInt"
addon-after="MB"
class="sg-margin-l-4 sg-width-full-100"
/>
formatterInt: (value: number) => Math.round(value),
precision
组件也可以直接格式化保留小数位数:precision="0"
,但是需要focus离开之后才格式化
<a-input-number
v-model:value="item.size"
placeholder="请输入"
type="number"
:min="1"
:default-value="1"
:precision="0"
addon-after="MB"
class="sg-margin-l-4 sg-width-full-100"
/>
双层循环
校验效果:
HTML
- 对form绑定ref和model,在ts中通过ref进行校验,由于是这里以及是外层循环内部了,所以ref要用函数的形式设置
- 循环项为item,下标为index(可换,不重要)
- 改变form-item的name为数组形式,第一个参数为循环列表的名字,第二个参数为index,第三个参数为此项标识。
- 输入控件绑定model为 item.此项标识
<a-card v-for="(item, oneIndex) in oneList" :key="item.id" :title="item.name" class="questionnaire-item-card">
<a-form :ref="(el: any) => setFormRef(el, questionnaireIndex)" :model="item" style="width: 100%" layout="inline">
<div v-for="(option, index) in item.twoList" :key="option.id" class="questionnaire-option-item">
<a-form-item
style="display: inline"
:name="['twoList', index, 'score']"
:label="option.name"
:rules="[{ required: true, message: '请填写对应选项分数', trigger: 'change' }]"
>
<a-input-number v-model:value="option.score" :precision="0" allow-clear placeholder="请输入" />
</a-form-item>
</div>
</a-form>
</a-card>
TS
- 定义ref、model
import { type FormInstance } from 'ant-design-vue';
const formRef = ref<FormInstance[]>([]);
const oneList = ref<any[]>([
{
id: 1,
name: "单选1",
twoList: [
{
name: "选项一",
score: 0,
},
{
name: "选项二",
score: 0,
}
]
},
{
id: 2,
name: "单选2",
twoList: [
{
name: "选项一",
score: 0,
},
{
name: "选项二",
score: 0,
}
]
},
{
id: 3,
name: "多选4",
twoList: [
{
name: "选项一",
score: 0,
},
{
name: "选项二",
score: 0,
}
]
},
])
- 定义设置表单ref的函数
function setFormRef(el: any, index: number) {
if (el) {
formRef.value[index] = el as FormInstance;
}
}
- 调用表单校验,需要异步可以自选加async await
formRef.value.forEach((it) => it.validate());