VUE动态渲染，双层for循环

最新推荐文章于 2023-07-20 16:21:44 发布

X@6666

最新推荐文章于 2023-07-20 16:21:44 发布

阅读量605

点赞数

分类专栏：前端文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/m0_60349254/article/details/128789345

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<div v-for="(fromItem,key) in form.listOut" :key="key" style="padding-top:10px">     ------第一个List循环
	.
	.
	.
	.
	.listOut中其它属性值(非list)
	<el-row:gutter="20" v-for="(domain, index) in fromItem.list" :key="domain.key">        ------第二个List循环
		<el-col :span="4">
		  <el-form-item :prop="'list.' + index + '.name'"
		  :rules="[
			{ required: false, message: '请输入名称', trigger: 'blur' },
			{ min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
		  ]">
			<template slot="label">
			  名称:
			  <el-tooltip class="item" effect="dark" placement="bottom">
				<div slot="content">名称</div>
				<i class="el-icon-question"></i>
			  </el-tooltip>
			</template>
			<el-input v-model="domain.name"></el-input>
		  </el-form-item>
		</el-col>
		<el-col :span="4">
		  <el-form-item :prop="'list.' + index + '.sex'">
			<template slot="label">
			  性别:
			  <el-tooltip class="item" effect="dark" placement="bottom">
				<div slot="content">性别</div>
				<i class="el-icon-question"></i>
			  </el-tooltip>
			</template>
			<el-select v-model="domain.sex" placeholder="请选择">
			  <el-option v-for="item in sexList" :key="item.code" :label="item.name" :value="item.code">
			  </el-option>
			</el-select>
		  </el-form-item>
		</el-col>
	</el-row>
</div>