图片模板网站,17做网站,南昌有做网站的吗,百度平台商家我的订单查询1.开发需求
在日常开发中#xff0c;我们会遇到form表单的动态添加和校验#xff0c;当我们需要在动态添加的内容中再次动态使用输入框的时候#xff0c;就会变得很繁琐#xff0c;我在网上找了很多案例#xff0c;没有符合自己需求的内容#xff0c;只好闲暇时间自己搞…1.开发需求
在日常开发中我们会遇到form表单的动态添加和校验当我们需要在动态添加的内容中再次动态使用输入框的时候就会变得很繁琐我在网上找了很多案例没有符合自己需求的内容只好闲暇时间自己搞一下了...
比如一下操作在一个输入框中输入多个批号然后提示多个批号有逗号分开。这种操作让用户操作起来就很不方便然后我就想到了在element中有一个动态添加tag的案例于是就想着使用这个方式去动态添加多种批号但是但是这个是放在动态表单中的最主要的是要校验这个批号是否填写所以这个需求就有了很大的挑战性
2.实现演示
下面是我完成后的演示请看 上述操作不仅仅实现了动态添加tag操作也实现了动态校验每一个批号是否填写的功能牛批
3.主要难点解析 3.1动态添加form表单 其实这个对于一个前端来说没什么难点这个在element中也有案例 3.2动态校验动态添加的tag标签 说到底这个才是本文主要介绍的难点因为tag的动态添加是循环一个数组input只是为这个数组添加内容但是你要在form表单中校验一个数组你会使用什么组件呢没错就是多选框请看代码 我使用一个空的多选项而且这个东西还不能给用户看到v-showfalse隐藏掉这样就能去“校验”tag标签了机智如我 3.3动态的添加、删除tag标签 其实这个在element中有案例我单独拿出来说一下肯定是有要提醒的地方那就是在点击“添加批号”按钮的时候按钮会“变成”输入框如果只有一个tag标签数组就没有问题和官网案例一样但是要是多个tag标签数组就会报错所有我们要动态添加一个“ref”,请看代码 在点击“添加批号”的按钮是动态的去显示input输入框并且使 input 获取焦点
好啦难点也都讲完了该给大家提供福利了贴代码
点个赞呗~
templatediv idappdiv classapp-containerel-form :modeldynamicValidateForm refdynamicValidateForm label-width100px classdemo-dynamicel-form-item propemail label批号 :rules[{ required: true, message: 请输入批号地址, trigger: blur },]el-input placeholder请输入批号(多种批号请用英文逗号分割) v-modeldynamicValidateForm.email/el-input/el-form-itemel-form-item v-for(domain, index) in dynamicValidateForm.domains :label批号 index :keydomain.key:propdomains. index .value :rules{required: true,message: 批号不能为空,trigger: blur,}el-checkbox-group v-showfalse v-modeldomain.value/el-checkbox-groupel-tag :keytag v-fortag in domain.value closable :disable-transitionsfalseclosehandleClose(tag, domain ,index){{tag}}/el-tagel-input classinput-new-tag v-ifdomain.inputVisible v-modeldomain.inputValue :refdomain.refssizesmall keyup.enter.nativehandleInputConfirm(domain,index)blurhandleInputConfirm(domain,index)/el-inputel-button v-else classbutton-new-tag sizesmall iconel-icon-plusclickshowInput(domain,index,domain.refs)添加批号/el-buttonel-button click.preventremoveDomain(domain)删除/el-button/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(dynamicValidateForm)提交/el-buttonel-button clickaddDomain新增批号/el-buttonel-button clickresetForm(dynamicValidateForm)重置/el-button/el-form-item/el-form/div/div
/templatescriptexport default {data() {return {dynamicValidateForm: {domains: [{value: [],inputVisible: false,inputValue: ,refs: domRefs0}],email: ,},inputVisible: false,inputValue: };},mounted() {},methods: {// 数组是不是有重复hasDuplicates(array) {return array.length ! new Set(array).size;},hasIncloud(array, value) {return array.indexOf(value) ! -1;},handleClose(tag, domain, index) {this.dynamicValidateForm.domains[index].value.splice(this.dynamicValidateForm.domains[index].value.indexOf(tag),1);},showInput(domain, index, refs) {this.dynamicValidateForm.domains[index].inputVisible true;this.$nextTick(() {this.$refs[refs][0].$refs.input.focus();});},handleInputConfirm(domain, index) {let inputValue domain.inputValue;let valArray this.dynamicValidateForm.domains[index].valuelet isSet this.hasIncloud(valArray, inputValue);if (!isSet) {if (inputValue) {this.dynamicValidateForm.domains[index].value.push(inputValue);}} else {this.$message({message: 批号不能重复填写!,type: warning,});}this.dynamicValidateForm.domains[index].inputVisible false;this.dynamicValidateForm.domains[index].inputValue ;},submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {console.log(this.dynamicValidateForm:, this.dynamicValidateForm)alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},removeDomain(item) {var index this.dynamicValidateForm.domains.indexOf(item);if (index ! -1) {this.dynamicValidateForm.domains.splice(index, 1);}},addDomain() {let len this.dynamicValidateForm.domains.lengththis.dynamicValidateForm.domains.push({value: [],inputVisible: false,inputValue: ,refs: domRefs len,key: Date.now(),});},},};
/scriptstyle.el-tag.el-tag {margin-left: 10px;}.button-new-tag {margin-left: 10px;height: 32px;line-height: 30px;padding-top: 0;padding-bottom: 0;}.input-new-tag {width: 90px;margin-left: 10px;vertical-align: bottom;}
/style
