vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

vueelementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
先看一下效果图(想在表单里动态的增删 form-item,然后添加rules,校验其必填项;

):

复制代码
<div v-for="(item, index) in form.labels" :key="index" class="label">
    <el-form-item label="名称:"
    :prop="'labels.' + index + '.name'"
    :rules="{
          required: true, message: '请输入', trigger: 'blur'
    }"
    class="middleInput">
      <el-input v-model.trim="item.name" maxlength="30" placeholder="请输入"></el-input>
      <i class="el-icon-circle-plus-outline icon" v-if="(index === (form.labels.length - 1))" @click.prevent="addKey(item)"></i>
      <i class="el-icon-remove-outline icon" v-if="(form.labels.length > 1)" @click.prevent="removeKey(item, index)"></i>
    </el-form-item>
    <el-form-item label="值:"
    :prop="'labels.' + index + '.value'"
    :rules="{
          required: true, message: '请输入', trigger: 'blur'
    }"
    class="middleInput">
      <el-input maxlength="100" show-word-limit type="textarea" :rows="3" v-model.trim="item.value" placeholder="请输入"></el-input>
    </el-form-item>
 </div>


//data:
form: {
    labels: [{
    	name: '',
    	value: ''
    }]
},

// methods:
addKey (item) {
  this.form.labels.push({
    name: '',
    value: ''
  })
},
removeKey (item, index) {
  this.form.labels.splice(index, 1)
},

注意

核心代码:

复制代码
:prop="'labels.' + index + '.name'"
:rules="{
       required: true, message: '请输入', trigger: 'blur'
 }"
  • prop里的值有格式要求,以本demo为例:"表单属性数组key名 + '.' + 索引值 + '.' + 数组里对象的key名";
  • rules里填写校验不成功触发条件和提示语;

参考:vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法-CSDN博客

相关推荐
北城以北88886 分钟前
ES6(二)
前端·javascript·es6
科兴第一吴彦祖7 分钟前
基于Spring Boot + Vue 3的乡村振兴综合服务平台
java·vue.js·人工智能·spring boot·推荐算法
朕的剑还未配妥20 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼25 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
携欢28 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33036 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦37 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
qq_18417767744 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost1 小时前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
C2X1 小时前
Vue3.0 学习总结
前端