vue2+elementui,动态生成的表单校验

话不多,先上一段视频,看看是不是你们需要的效果 

elementui动态生成表单校验

附上代码

	
		
			<!--  -->
			
				
					
						
						问卷编辑
					
					
						问卷编辑完成,千万不要忘记点击保存哦
						保存
					
				
				
					
						
							
								
									
										添加问题
									
								
							
						
						
							
								
									单选
									多选
									开放式问题
								
								
									
										Q{{index+1}}.
									
									
										
										删除
									
								
								
									
								
								
									
										
											
												{{chars[index1]}}.
											
										
										
											
											
										
									

								
								
									
										
										
									

								
								
									
										
										
									
								


							
						
					
				
			

		
	





	@import '../../../../assets/css/screenBase.css';

	.home {
		margin-top: 100px;
	}

	.home-box {
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		width: 1000px;
		justify-content: center
	}

	.home-div {
		width: 1000px;
		height: 650px;
		background-color: #fff;
		border-radius: 10px;
		/* 	padding-top: 20px; */
		padding-right: 40px;
		padding-left: 40px;

		/* padding-bottom: 20px; */
	}

	.blueBlock {
		height: 8px;
		width: 2px;
		background-color: #226cd3;
		margin-right: 10px;
	}

	.title {
		font-weight: 600;
		font-size: 24px;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 900px;

	}

	.el-form-item {
		margin-bottom: 0px;
	}

	.content-top {

		margin-top: 20px;
		display: flex;
	}

	.content-top /deep/ input {
		width: 800px;
	}

	.content-center {
		width: 880px;
		background-color: #e9f5f136;
		border-radius: 10px;
		margin-top: 5px;
		padding: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.content-box {
		/* margin-top: 20px; */
		padding: 5px;
		height: 500px;
		overflow: hidden;
		overflow-y: auto;

	}

	/deep/.el-form--label-top .el-form-item__label {
		padding: 0px;
	}

	.btn {
		margin-top: 40px;
		text-align: center;
	}

	.question {}

	.question /deep/.el-form-item__content {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}

	/* .answer /deep/.el-form-item__content {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 750px;
	} */

	.question /deep/ input {
		width: 550px;
	}

	.question div {
		width: 100px;
		text-align: center;
	}

	.question i {
		color: #F56C6C;
		margin-right: 5px;
	}

	.answer /deep/ .el-input-group--prepend {
		width: 500px;
	}

	.answer /deep/ .el-input__inner {
		width: 500px;
	}

	.answer-right {
		width: 100px;
		display: flex;
		align-items: flex-start;
		/* text-align: center; */
	}

	.answer-right span {
		width: 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		display: inline-block;
		background: #FFFFFF;
		border-radius: 8px;
		border: 1px solid #CCD3E7;

	}

	.answer-right i {
		color: #000;
		font-weight: 600;
	}

	.answer {
		display: flex;
		align-items: center;
	}

最主要的地方,因为我是双层的循环遍历,先看第一层的注意地方

最最最最最最最主要的地方,这是第二层的地方