網站首頁 編程語言 正文
一層循環嵌套時
<el-form :model="addform"
ref="addform"
:rules="rules">
<el-form-item required
label="姓名"
v-for="(item, index) in addform.resourceList"
:key="index"
:prop="`resourceList.${index}.name`"
:rules="rules.name">
<el-input v-model="item.name"></el-input>
</el-form-item>
</el-form>
?data數據結構及校驗規則
data() {
return {
addform: {
resourceList: [{
name: ''
}]
},
rules: {
name: [{
required: true,
message: '請輸入姓名',
trigger: 'blur'
}]
},
}
},
?prop應該寫成 如?
:prop="'resourceList.' + index + '.name'"
?prop格式為?'遍歷的數組 . ' + 下標index + ' . 實際需要校驗的key'
多層循環嵌套時?
<el-form :model="formData" :rules="rules" ref="ruleForm">
<div v-for="(item, index) in formData.oneCycle" :key="index">
<el-form-item label="姓名" :prop="`oneCycle.${index}.name`" :rules="rules.name">
<el-input v-model="item.name"></el-input>
</el-form-item>
<div v-for="(itemSon, indexSon) in item.towCycle" :key="indexSon">
<el-form-item label="性別" :prop="`oneCycle.${index}.towCycle.${indexSon}.sex`" :rules="rules.towCycle.sex">
<el-input v-model="itemSon.sex"></el-input>
</el-form-item>
<el-form-item label="年齡" :prop="`oneCycle.${index}.towCycle.${indexSon}.age`" :rules="rules.towCycle.age">
<el-input v-model="itemSon.age"></el-input>
</el-form-item>
</div>
</div>
</el-form>
??data數據結構及校驗規則
data() {
return {
formData: {
oneCycle: [{
name: '',
towCycle: [{
sex: '',
age: ''
}]
}]
},
rules: {
name: [{
required: true,
message: '請輸入姓名',
trigger: 'blur'
}],
towCycle: {
sex: [{
required: true,
message: '請輸入性別',
trigger: 'blur'
}],
age: [{
required: true,
message: '請輸入年齡',
trigger: 'blur'
}]
}
},
}
},
?prop應該寫成 如?
:prop="'oneCycle.' + index + '.towCycle' + indexSon + ‘.sex’"
?prop格式為?'遍歷的一級數組 . ' + 下標index + ‘.遍歷的二級數組’+ 二級數組下標index + ' . 實際需要校驗的key'
原文鏈接:https://blog.csdn.net/weixin_43743175/article/details/126537096
相關推薦
- 2022-08-28 關于CLion配置visual?studio(msvc)和JOM多核編譯的問題_C 語言
- 2022-08-04 Python并發編程之IO模型_python
- 2022-08-12 Python打包成exe文件的詳細操作指南_python
- 2022-07-21 C語言全面細致講解單雙精度float與double的使用方法_C 語言
- 2022-09-19 Python?Numpy中ndarray的常見操作_python
- 2022-10-15 詳解C++中常用的四種類型轉換方式_C 語言
- 2022-06-06 PyTorch?device與cuda.device用法介紹_python
- 2022-06-24 C#利用itext實現PDF頁面處理與切分_C#教程
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支