日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

element form表單循環校驗(動態綁定的數據)

作者:我總是詞不達意 更新時間: 2022-09-22 編程語言

一層循環嵌套時

<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

欄目分類
最近更新