VUE动态表单校验
-
功能描述
用户可以添加一个员工,也可以同时添加多个员工,但是每个员工的对应表单都存在表单校验
-
效果图
-
代码如下
<!-- -->
<template>
<div class=''>
<!-- 添加员工信息弹出层 -->
<el-dialog title="添加员工" :visible.sync="dialogTableVisible" @close="handleClose">
<div>
<div class="popSubTitle">
请在下面输入员工的姓名、手机号码、角色和工作地点,并点击“保存”按钮。您每次可以添加最多5个员工。
</div>
<div class="inputTable">
<div class="inputTable_header">
<el-row :gutter="20">
<el-col>姓名</el-col>
<el-col>工作地点</el-col>
<el-col>角色</el-col>
<el-col>手机号码</el-col>
</el-row>
</div>
<div class="input_info">
<el-form :model="input_list" :rules="rules_add" :inline="true" ref="input_list" label-width="100px" class="demo-ruleForm" size="mini">
<el-row v-for="(item,index) in input_list.powerAttrList" :key="index">
<!-- 姓名 -->
<el-form-item label=""
:prop="'powerAttrList.' + index + '.name'"
:rules="rules_add.name" >
<el-input v-model="item.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<!-- 工作地点 -->
<el-form-item label=