最近vue2遇到的问题
有一个数据结构是多层嵌套
var level1list = [ { name: 'level1-1', level2List:[ { name: 'level2-1', level3List:[ { name: 'level3-1', value: '' }, { name: 'level3-2', value: '' }, ] }, { name: 'level2-2', level3List:[ { name: 'level3-1', value: '' }, { name: 'level3-2', value: '' }, ] }, ] }, { name: 'level1-2', level2List:[ { name: 'level2-1', level3List:[ { name: 'level3-1', value: '' }, { name: 'level3-2', value: '' }, ] }, { name: 'level2-2', level3List:[ { name: 'level3-1', value: '' }, { name: 'level3-2', value: '' }, ] }, ] }, ]
<el-form :model="level1list" ref='wewe'> <div v-for="(l1, l1Index) in level1list"> <el-row v-for="(l2, l2Index) in l1.level2list"> <el-col v-for="(l3item, l3Index) in l2.level3list"> <el-form-item :rules="l3item.rules" :prop="`level2list${l1Index}.level2list${l2Index}.level3list${l3Index}.value`"> <input v-model="l3item.value"></input> </el-form-item> </el-col> </el-row> </div> </el-form>
重点在于rules可以直接写到el-form-item上,prop需要根据层级来制定数据位置所在。
大体方向是这样的,以上代码未经测试,只适用于个人解决问题后的记录。
标签:vue,name,value,表单,嵌套,level2,level3,level3List,element From: https://www.cnblogs.com/HePandeFeng/p/18384591