vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66
又接到新需求了吧~~
背景
在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加、移除表单,更加个性化的效果。
常见于填写个人信息、附加内容的表单
例如:
“工作经历”可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除
问题
在实现之前,提出几个问题
- vue 怎么动态渲染或移除表单上去
- v-model 怎么绑定动态添加表单的 value 值
- 动态新增的表单如何验证
- 动态表单怎么填写对应的 prop
...
好吧,我当时也思考了一会,最后选择数组方式,动态渲染
代码实现讲解
利用数组,v-for 循环方式,可以完美实现动态渲染和移除,因为操作的只有对象数组而已
请格外注意动态添加表单的 rule 和 prop
每个动态添加的表单都要加上 rule
prop 需要根据对象数组下标绑定设置对应的 value(:prop="'azList' + index + '.azName'")
<div class="section-form" v-for="(item, index) in form.azList" :key="index">
<span v-if="isShowCloseBtn" class="close" @click="deleteItem(index)">
<i class="el-icon-close"></i>
</span>
<el-form-item label="可用区名称:"
:rules="[{ required: true, message: '可用区名称不能为空' }]"
:prop="'azList[' + index + '].azName'"
label-width="150px">
<el-input placeholder="请输入可用区名称" v-model="item.azName" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="逻辑可用区编码:"
:rules="[{ required: true, message: '逻辑可用区编码不能为空' }]"
label-width="150px"
:prop="'azList[' + index + '].logicCode'">
<el-input placeholder="请输入唯一ID" v-model="item.logicCode" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="物理可用区编码:"
:rules="[{ required: true, message: '物理可用区编码不能为空' }]"
label-width="150px"
:prop="'azList[' + index + '].physicCode'">
<el-input placeholder="请输入唯一ID" v-model="item.physicCode" :maxlength="30"></el-input>
</el-form-item>
</div>
那么对应的 js 代码为
export default {
name: 'vouchersDetail',
data() {
return {
form: {
regionName: '',
regionCode: '',
// 动态添加的对象数组
azList: [
{
azName: '',
logicCode: '',
physicCode: ''
}
]
}
}
},
computed: {
// 至少保留一个动态表单的开关
isShowCloseBtn() {
return this.form['azList'].length > 1
}
},
methods: {
addItem() {
// 点击添加表单的按钮,只需要将表单绑定的 value 作为对象 push 到对象数组
this.form['azList'].push({
azName: '',
logicCode: '',
physicCode: '',
weight: ''
})
},
deleteItem(index) {
// 点击移除表单的按钮,根据点击的当前 index 移除对象数组的元素
this.form['azList'].splice(index, 1)
},
goBack() {
window.history.back(-1)
}
}
}
更新
19号更新,分离组件方法,写法更简便,易维护,还可以将校验规则剥离出去
根据上面的方法 ==利用数组,v-for 循环方式==
此次更新,关键在于,是父组件引用子组件的 ==template 循环==
v-for 循环数组的 item 对象传入子组件 template
每个子组件的 form 的 :model = 传入的 item,也就不需要用到数组下标 index,每个子组件是独立的一个 form,也就是说,每个动态添加字段的校验规则可以剥离出去了
父组件
template 循环<create-region class="section-form" ref="refCreateAz" :infoData="item" :indexNum="index" :isShowCloseBtn="isShowCloseBtn" v-for="(item, index) in form.azList" :key="index" @deleteItem="deleteItem"> </create-region>
js 与原来无差,只是多了引入子组件的 component
components: {
CreateRegion: () => import('@/views/region/models/CreateRegion')
}
子组件
<template>
<el-form :model="infoData" :rules="rulesAz" label-width="150px" ref="formAz">
<span v-if="isShowCloseBtn" class="close" @click="deleteItem">
<i class="el-icon-close"></i>
</span>
<el-form-item label="可用区名称:" prop="azName" label-width="150px">
<el-input placeholder="请输入可用区名称" v-model="infoData.azName" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="逻辑可用区编码:" label-width="150px" prop="logicCode">
<el-input placeholder="请输入唯一ID" v-model="infoData.logicCode" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="物理可用区编码:" label-width="150px" prop="physicCode">
<el-input placeholder="请输入唯一ID" v-model="infoData.physicCode" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="权重设置:" label-width="150px">
<el-input placeholder="请设置权重" v-model="infoData.weight"></el-input>
</el-form-item>
</el-form>
</template>
<script>
import { ORGION_AZLIST_RULES } from '@/views/service/rules'
export default {
props: {
infoData: {
require: true
},
indexNum: {
type: Number
},
isShowCloseBtn: {
type: Boolean
}
},
data() {
return {
form: this.infoData,
rulesAz: ORGION_AZLIST_RULES.call(this)
}
},
computed: {},
methods: {
deleteItem() {
this.$emit('deleteItem', this.indexNum)
},
validates() {
return new Promise((resolve, reject) => {
this.$refs['formAz'].validate(async valid => {
if (valid) {
// 验证通过
resolve(true)
} else {
reject(false)
}
})
})
}
}
}
</script>
校验
export const ORGION_AZLIST_RULES = function() {
return {
logicCode: [
{
required: true,
message: '逻辑可用区编码不能为空',
trigger: 'blur'
},
{
validator: CHECK_AZEXITS_CODE.bind(this),
trigger: 'blur'
}
],
physicCode: [
{
required: true,
message: '物理可用区编码不能为空',
trigger: 'blur'
},
{
validator: CHECK_AZEXITS_CODE.bind(this),
trigger: 'blur'
}
],
azName: [
{
required: true,
message: '可用区名称不能为空',
trigger: 'blur'
}
]
}
}
自定义校验
export const CHECK_AZEXITS_CODE = async function(rule, value, callback) {
let paramName = rule.field
let reqData = {}
reqData[paramName] = value
let { result } = await getAzExist(reqData)
if (result.result) {
if (paramName === 'logicCode') {
callback(new Error('逻辑可用区编码已存在,请重新输入'))
} else {
callback(new Error('物理可用区编码已存在,请重新输入'))
}
} else {
callback()
}
}
写在后面
如果大家有啥更好的方法实现,欢迎在评论区相互探讨~
写完下班、
博客地址:https://ainyi.com/66
- Netbeans配置Xdebug
- rpc框架: thrift/avro/protobuf 之maven插件生成java类
- WebComponent魔法堂:深究Custom Element 之 从过去看现在
- 数据可视化-EChart2.0使用总结1
- JavaScript事件概览
- gradle项目与maven项目相互转化
- rpc框架之gRPC 学习 - hello world
- Angular Service入门
- spring:如何用代码动态向容器中添加或移除Bean ?
- WebComponent魔法堂:深究Custom Element 之 标准构建
- druid 数据源 使用属性文件的一个坑
- Angular企业级开发(3)-Angular MVC实现
- spring: 加载远程配置
- java:如何让程序按要求自行重启?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mybatis-plus代码生成器
- mybatis-plus逻辑删除
- mybatis-plus一些关键配置
- mybatis-plus自定义sql注入器
- k8s代码走读---kube-controller-manager
- 我们一起学一学渗透测试——黑客应该掌握的HTML基础知识(一)
- 一套漏洞组合拳接管你的账号
- 我们一起学一学渗透测试——黑客应该掌握的HTML基础知识(二)
- 我用Paddle Lite在树莓派3b+上从零开始搭建“实时表情识别”项目
- mybatis-plus:自动填充功能
- 词义类比与全局词共现信息不可兼得?基于飞桨实现的GloVe说可以
- MyBatis-plus乐观锁插件
- Jmeter(十九) - 从入门到精通 - JMeter监听器 -上篇(详解教程)
- python---rsa加密根据指数和模生成加密参数模板
- 搞了这么多年终于知道接口和抽象类的应用场景了