表单v-for动态添加的校验，即动态数据项表单验证

可乐KL

已于 2023-09-21 11:20:41 修改

阅读量328

点赞数

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

于 2023-09-21 11:19:17 首次发布

本文链接：https://blog.csdn.net/m0_49494051/article/details/133128934

版权

vue 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

elementui

4 篇文章 0 订阅

订阅专栏

👇

:prop="'devInfos.'+index+'.ip'"  // 官方写法
:rules="[{ required: true, message: '请输入设备mac'}]" // 行内写规则

data () {
	return {
		ruleForm: {
        roomName: '',
        maxPeopleNum: '',
        isEnable: false,
        devInfos: [
          {
            id: '',
            ip: '',
            mac: '',
            account: '',
            password: ''
          }
        ]
      },
	}
}

这样就好啦

   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="会议室名称" prop="roomName">
          <el-input v-model="ruleForm.roomName" placeholder="请输入会议名称"></el-input>
        </el-form-item>
        <el-form-item label="可容纳人数" prop="maxPeopleNum">
          <el-input v-model.number="ruleForm.maxPeopleNum" type="number" placeholder="请输入可容纳人数"></el-input>
        </el-form-item>
        <el-form-item label="停用/启用" prop="isEnable">
          <el-switch v-model="ruleForm.isEnable"></el-switch>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.devInfos" :key="index" >
          <el-form-item class="devInfos" label="设备IP" :prop="'devInfos.'+index+'.ip'" :rules="[{ required: true, message: '请输入设备IP'}]">
            <el-input v-model="item.ip" placeholder="请输入设备IP"></el-input>
          </el-form-item>
          <el-form-item label="设备mac" :prop="'devInfos.'+index+'.mac'" :rules="[{ required: true, message: '请输入设备mac'}]">
            <el-input v-model="item.mac" placeholder="请输入设备mac"></el-input>
          </el-form-item>
          <el-form-item label="设备账号" :prop="'devInfos.'+index+'.account'" :rules="[{ required: true, message: '请输入设备账号'}]">
            <el-input v-model="item.account" placeholder="请输入设备账号"></el-input>
          </el-form-item>
          <el-form-item label="设备密码" :prop="'devInfos.'+index+'.password'" :rules="[{ required: true, message: '请输入设备密码'}]">
            <el-input v-model="item.password" placeholder="请输入设备密码"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="text" @click="addDevInfo">新增</el-button>
            <el-button v-show="ruleForm.devInfos.length>1" type="text" @click="delDevInfo(index)">删除</el-button>
          </el-form-item>
        </div>
        <el-form-item class="btn">
          <el-button class="cancelBtn" @click="handleClose('ruleForm')">取消</el-button>
          <el-button :loading="btnLoading" class="publishBtn" @click="save('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>