element-plus表单循环校验

最新推荐文章于 2024-07-25 09:51:39 发布

live_for

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量200

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/live_for/article/details/140321991

版权

<el-form ref="formEl" :model="resData">
    <div v-for="(item, i) in resData.array" :key="i">
        <div v-for="(element, index) in item" :key="i">
            <el-form-item 
            :label="element.label"
            :prop="'array.' + i + '.' + index + '.lastYearVerify'"
            :rules="comRules.rules07">
                <el-input v-model="element.lastYearVerify"/>
        </el-form-item>
    </div>
</el-form>

//数据结构 ( 数组里面包数组 )
const resData = reactive({
    array:[
        [
            { label:"总支出", lastYearVerify:"14334" },
            { label:"总收入", lastYearVerify:"14334" },
        ]
    ]
})

<el-form ref="formEl" :model="resData">
    <div v-for="(item, i) in resData.array" :key="i">
        <div v-for="(element, index) in item.children" :key="index">
            <el-form-item:label="element.label"
            :prop="'array.' + i + 'children.' + index +'.lastYearVerify" :rules="comRules.rules07">
                <el-input v-model="element.lastYearVerify"/>
            </el-form-item>
        </div>
    </div>
</el-form>

//数据结构（循环每个元素，某个属性） 
const resData = reactive({
    array:[
        {
        	label:"总支出", 
        	lastYearVerify:"14334" ,
        	children:[
				{ name:"你好", age:19 }
			]
        },
        {
        	label:"总支出", 
        	lastYearVerify:"14334" ,
        	children:[
				{ name:"你好", age:19 }
			]
        },
    ]
}

注意：prop，rules不同于平常 form 校验

两者区别：

1、数据结构不同

2、导致获取对应元素的索引不同（prop）

其他相同