vue3 Element通过v-for循环渲染的form表单验证
在我们的业务开发中,有时候会经常遇到动态v-for循环渲染出el-form-item,那么这些动态生成的el-form-item如何来进行表单验证<el-form :model="accountFormDatas" :inline="true" ref="accountFormRef" label-width="120px" :rules="rulesTwo"><div>&
·
在我们的业务开发中,有时候会经常遇到动态v-for循环渲染出el-form-item,那么这些动态生成的el-form-item如何来进行表单验证
<el-form :model="accountFormDatas" :inline="true" ref="accountFormRef" label-width="120px" :rules="rulesTwo">
<div>
<el-form-item label="RFID">
<el-radio v-model="accountFormDatas.isRfid" label="1">有</el-radio>
<el-radio v-model="accountFormDatas.isRfid" label="0">无</el-radio>
</el-form-item>
</div>
<div style="margin-top: -10px">
<el-form-item label="是否有编号">
<el-radio-group v-model="accountFormDatas.isCode" @change="agreeChange">
<el-radio label="1" :disabled="disables">有</el-radio>
<el-radio label="0" :disabled="disabledAdd">无</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div style="width: 860px; height: 130px; border: 1px solid gray; margin-bottom: 50px" v-show="addAccountForm" v-for="(item, index) in accountFormDatas.applyNeed" :key="index">
<div style="display: flex; margin-top: 10px">
<el-form-item label="工具编号" :prop="`applyNeed.${index}.code`" :rules="rulesTwo.code">
<el-input v-model="item.code" :disabled="disables" style="width: 140px"></el-input>
</el-form-item>
<el-form-item label="状态" :prop="`applyNeed.${index}.status`" :rules="rulesTwo.status">
<el-select v-model="item.status" placeholder="Select" size="small" :disabled="disables" style="width: 120px">
<el-option label="正常" value="0"></el-option>
<el-option label="维护" value="1"></el-option>
<el-option label="修理" value="2"></el-option>
<el-option label="停用" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="报废时间">
<el-input v-model="item.scrapTime" :disabled="disables"></el-input>
</el-form-item>
</div>
<div>
<el-form-item label="条形码" :prop="`applyNeed.${index}.barCode`" :rules="rulesTwo.barCode">
<el-input v-model="item.barCode" :disabled="disables"></el-input>
</el-form-item>
<el-form-item label="存放位置">
<el-input v-model="item.storagePlace" :disabled="disables" style="width: 150px"></el-input>
</el-form-item>
<div style="text-align: right; padding: 0 10px;">
<el-button type="danger" icon="el-icon-delete" circle @click="deleteNeed(index)"></el-button>
<el-button type="primary" icon="el-icon-plus" circle @click='addNeed'></el-button>
</div>
</div>
</div>
</el-form>
el-form 的 :model="accountFormDatas" 需要和
v-for="(item, index) in accountFormDatas.applyNeed" 保持一致
const rulesTwo = { // 入库表单验证规则
code: [
{ required: true, message: '请填写工具编号', trigger: 'blur' }
],
name: [
{ required: true, message: '请填写工具名称', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择', trigger: 'change' }
],
barCode: [
{ required: true, message: '请选择', trigger: 'blur' }
]
}
return {
rulesTwo
}
最后添加验证
const submitPopup = async () => { // 点击保存 关闭页面
await accountFormRef.value.validate() // 正则判断
}
更多推荐
已为社区贡献2条内容
所有评论(0)