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

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

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

):

html部分

javascript 复制代码
<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>

js

javascript 复制代码
//data:
form: {
    labels: [{
    	name: '',
    	value: ''
    }]
},

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

注意

核心代码:

javascript 复制代码
:prop="'labels.' + index + '.name'"
:rules="{
       required: true, message: '请输入', trigger: 'blur'
 }"
  • prop里的值有格式要求,以本demo为例:"表单属性数组key名 + '.' + 索引值 + '.' + 数组里对象的key名";
  • rules里填写校验不成功触发条件和提示语;
相关推荐
专注API从业者6 小时前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
大数据·运维·前端·数据挖掘·自动化
你的人类朋友6 小时前
【Node&Vue】JS是编译型语言还是解释型语言?
javascript·node.js·编程语言
烛阴6 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子20187 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
Nicholas687 小时前
flutterAppBar之SystemUiOverlayStyle源码解析(一)
前端
黑客飓风8 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
emojiwoo9 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉9 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧10 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang10 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript