1. html页面
1.1 代码
<van-form ref="editRef">
<van-field
v-model="dataForm.scaleNo"
name="scaleNo"
label="秤的编号"
placeholder="请选择秤"
readonly
:rules="scaleRules"
@click="chooseImmune(0)"
>
<template #right-icon>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiangyou14"></use>
</svg>
</template>
</van-field>
<van-field
v-model="dataForm.number"
type="number"
label="饲养数量"
placeholder="请输入种群数量"
:rules="numberRules"
/>
<van-field name="sex" label="种群性别">
<template #input>
<van-radio-group v-model="dataForm.sex" style="display: flex">
<van-radio name="1">混群</van-radio>
<van-radio name="2">公群</van-radio>
<van-radio name="3">母群</van-radio>
</van-radio-group>
</template>
</van-field>
</van-form>
<div class="btn-wrap">
<van-button type="primary" block round @click="handleSubmit">提交</van-button>
</div>
1.2 注意项
- 这里的ref(editRef)一定不能和表单数据(dataForm)一致,如果相同会出现输入框失焦数据丢失以及radio单选框不显示的问题
- rules需要单独定义规则名称,如果直接写成
:rules="[required:true,message:'12121']"
可能会出现错误提示includes[name] is not a function
- vue3中button已经有了点击事件就不需要再设置
@submit="onSubmit"
2. JS部分核心代码
const shedRules = [{ required: true, message: "请选择所属舍号", trigger: "onChange" }];
const scaleRules = [{ required: true, message: "请选择秤编号", trigger: "onChange" }];
const numberRules = [{ required: true, message: "请输入饲养数量", trigger: "onBlur" }];
// 表单
const dataForm = ref<IScaleSaveParam>({
orgName: "",
farmer: "",
groupNo: "",
bizDate: "",
scaleNo: "",
shedNo: "",
number: undefined,
sex: "1",
});
const scaleList = ref<IScaleItemInfoList[]>();
const shedList = ref<IShedItemInfoList[]>();
const editRef = ref()
//表单提交
const handleSubmit = () => {
console.log(dataForm.value);
editRef.value
?.validate()
.then(() => {
console.log("验证成功");
})
.catch(() => {
console.log(2222);
});
};