Vue+Element-ui实例_在form中动态校验tag标签

1.开发需求

在日常开发中,我们会遇到form表单的动态添加和校验,当我们需要在动态添加的内容中再次动态使用输入框的时候,就会变得很繁琐,我在网上找了很多案例,没有符合自己需求的内容,只好闲暇时间自己搞一下了...

比如一下操作,在一个输入框中输入多个批号,然后提示多个批号有逗号分开。这种操作让用户操作起来就很不方便
然后我就想到了,在element中,有一个动态添加tag的案例,于是就想着使用这个方式去动态添加多种批号,但是,但是这个是放在动态表单中的,最主要的是要校验这个批号是否填写,所以,这个需求就有了很大的挑战性

2.实现演示

下面是我完成后的演示,请看

上述操作不仅仅实现了动态添加tag操作,也实现了动态校验每一个批号是否填写的功能(牛批)

3.主要难点解析

        3.1动态添加form表单

        其实这个对于一个前端来说没什么难点,这个在element中也有案例

        3.2动态校验动态添加的tag标签

        说到底,这个才是本文主要介绍的难点,因为tag的动态添加是循环一个数组,input只是为这个数组添加内容,但是你要在form表单中校验一个数组,你会使用什么组件呢,没错,就是多选框,请看代码

        我使用一个空的多选项,而且这个东西还不能给用户看到,v-show="false"隐藏掉,这样就能去“校验”tag标签了(机智如我)

        3.3动态的添加、删除tag标签

        其实这个在element中有案例,我单独拿出来说一下,肯定是有要提醒的地方,那就是在点击“添加批号”按钮的时候,按钮会“变成”输入框,如果只有一个tag标签数组就没有问题,和官网案例一样,但是要是多个tag标签数组就会报错,所有我们要动态添加一个“ref”,请看代码

在点击“添加批号”的按钮是,动态的去显示input输入框,并且使 input 获取焦点 

好啦难点也都讲完了,该给大家提供福利了,贴代码

点个赞呗~

<template>
  <div id="app">
    <div class="app-container">
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item prop="email" label="批号" :rules="[
            { required: true, message: '请输入批号地址', trigger: 'blur' },
          ]">
          <el-input placeholder="请输入批号(多种批号请用英文逗号分割)" v-model="dynamicValidateForm.email"></el-input>
        </el-form-item>
        <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'批号' + index" :key="domain.key"
          :prop="'domains.' + index + '.value'" :rules="{
            required: true,
            message: '批号不能为空',
            trigger: 'blur',
          }">
          <el-checkbox-group v-show="false" v-model="domain.value">
          </el-checkbox-group>
          <el-tag :key="tag" v-for="tag in domain.value" closable :disable-transitions="false"
            @close="handleClose(tag, domain ,index)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="domain.inputVisible" v-model="domain.inputValue" :ref="domain.refs"
            size="small" @keyup.enter.native="handleInputConfirm(domain,index)"
            @blur="handleInputConfirm(domain,index)">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" icon="el-icon-plus"
            @click="showInput(domain,index,domain.refs)">添加批号
          </el-button>
          <el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
          <el-button @click="addDomain">新增批号</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export 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].value
        let 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.length
        this.dynamicValidateForm.domains.push({
          value: [],
          inputVisible: false,
          inputValue: "",
          refs: "domRefs" + len,
          key: Date.now(),
        });
      },
    },
  };
</script>

<style>
  .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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/207810.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

实现优雅的自增枚举类:Python中的枚举与自增技巧

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 枚举类型在编程中扮演着重要的角色&#xff0c;它们为变量赋予了更加清晰的含义。然而&#xff0c;在Python中&#xff0c;实现自增的枚举类并非直接而简单的任务。本文将深入讨论如何通过不同的方式优雅地实现自…

matlab 混沌动力学行为-分岔图-李雅普指数等

1、内容简介 略 24-可以交流、咨询、答疑 2、内容说明 混沌动力学行为-分岔图-李雅普指数等 包含各种类型的混沌模型求解&#xff0c;包含其分叉图、李雅普指数等 混沌、分叉图、李雅普指数 3、仿真分析 略 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/…

JMX的使用

1. 定义和意义 JMX是Java Management Extention的缩写&#xff0c;出发点是让外部通过属性/方法来读取或设置程序状态。对于提供对外服务的程序来说&#xff0c;天生就有这样的能力&#xff0c;Web程序通过HTTP接口对外暴露&#xff0c;RPC应用通过RPC接口暴露。不过带来的问…

matlab simulink 永磁同步电机PI调速控制

1、内容简介 略 27-可以交流、咨询、答疑 2、内容说明 永磁同步电机调速控制 永磁同步电机PI调速控制 永磁同步电机PI调速控制、PMSM 3、仿真分析 略 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/s/1AAJ_SlHseYpa5HAwMJlk1w 提取码&#xff1a;rvol 路…

【Linux】:信号(三)捕捉

信号捕捉 一.sigaction1.基本使用2.sa_mask字段 二.可重入函数三.volatile四.SIGCHLD信号 承接上文 果信号的处理动作是用户自定义函数,在信号递达时就调用这个函数,这称为捕捉信号。由于信号处理函数的代码是在用户空间的,处理过程比较复杂,举例如下: 用户程序注册了SIGQUIT信…

React Native环境搭建及Hello World

写这篇博客的目的就是想说,react native 挺简单,但是大部分初级前端会被环境搭建给难住,从而放弃. 环境搭建 环境搭建其实说简单也挺简单的,有经验的前端直接翻看react native中文文档就行,直接按上面来肯定没错 以下以安卓开发,windows配置环境为例,来演示一遍 首先 电脑…

【开发PaaS】基于Postgresql的开发平台Supabase

Supadase是开源的。我们选择可扩展的开源工具&#xff0c;使其易于使用。 Supadase不是Firebase的1对1映射。虽然我们正在构建Firebase提供的许多功能&#xff0c;但我们不会以同样的方式进行&#xff1a; 我们的技术选择大不相同&#xff1b;我们使用的一切都是开源的&#…

python高级练习题库实验1(B)部分

文章目录 题目1代码实验结果题目2代码实验结果题目3代码实验结果题目4代码实验结果题目5代码实验结果题目总结题目1 打包糖果小游戏,用户输入糖果品牌与个数,还有一个盒子里面可以装多少个糖果,输出一些打印信息,如下图所示: 代码 print("Packaging lollies into…

Python+requests+Jenkins接口自动化测试实例

在做功能测试的基础上&#xff0c;我平时也会用postman测试接口&#xff0c;不过postman只能测试一个一个接口&#xff0c;不能连贯起来&#xff0c;特别是我们公司的接口很多都是要用到token的&#xff0c;导致我每次测个需要登录的接口都要去获取到token&#xff0c;做了很多…

Git常用命令#更改用户名

1.查看当前用户信息 git config user.name2.更改用户名 特定仓库中更改用户名 如果你只想在特定仓库中更改用户名&#xff0c;可以在不使用 --global 参数的情况下执行相同的命令&#xff0c;并进入特定仓库的目录进行修改。 cd /path/to/your/repository git config user.na…

ipa应用测试平台怎么开开具发票

控制台-个人中心-发票管理 ●点击申请发票可以开具发票 ●申请发票-填写资料-勾选订单 ●个人发票开具以及公司发票开具 ●提交发票申请 ●等待申请成功开具发票 ●发票开具成功&#xff0c;我们可以开具或者查看发票

《曾国藩传》:崇尚笨拙的人生哲学

哈喽啊&#xff0c;大家好&#xff0c;我是雷工&#xff01; 以前读书喜欢读小说&#xff0c;喜欢看《我从你的全世界路过》《云间有个小卖铺》这些轻松的小说&#xff0c;读起来很轻松。 随着年龄增长&#xff0c;阅历的增加开始喜欢读历史&#xff0c;读人物传记&#xff0c;…

MOS管的静电击穿问题

MOS管输入电阻很高&#xff0c;为什么一遇到静电就不行了&#xff1f; 静电击穿&#xff1a;由于静电的积累导致电压超过了原本MOS的绝缘能力&#xff0c;导致电流突然增大的现象。 MOS管基础知识了解&#xff1a; G极(gate)—栅极&#xff0c;不用说比较好认 S极(source)—源…

C#中GDI+绘图应用(柱形图、折线图和饼形图)

目录 一、柱形图 1.示例源码 2.生成效果 二、折线图 1.示例源码 2.生成效果 三、饼形图 1.示例源码 2.生成效果 GDI绘制的一些常用的图形&#xff0c;其中包括柱形图、折线图和饼形图。 一、柱形图 柱形图也称为条形图&#xff0c;是程序开发中比较常用的一种图表技术…

【STM32】EXTI外部中断

1 中断系统 1.1 中断简介 中断&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行。 比如&a…

Unittest单元测试框架之unittest_执行用例的详细信息

unittest_执行用例的详细信息 用unittest.main()执行测试集 这里的verbosity是一个选项,表示测试结果的信息复杂度&#xff0c;有三个值&#xff1a; 0 (静默模式): 你只能获得总的测试用例数和总的结果 比如 总共100个 失败20 成功801 (默认模式): 非常类似静默模式 只是在…

SRE-架构框架-可靠性

Google-架构框架-可靠性 可靠性概览 Google Cloud 架构框架中的此类别介绍如何在云平台上构建和运营可靠的服务。此外&#xff0c;您还将了解一些支持可靠性的 Google Cloud 产品和功能。 该架构框架介绍了最佳实践&#xff0c;提供了实现建议&#xff0c;并说明了一些可用的…

LeetCode Hot100 75.颜色分类

题目&#xff1a; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 so…

数据结构——图解链表OJ题目

学完了单链表之后&#xff0c;我们对其基本结构已经有了一定的了解&#xff0c;接下来我们通过一些题目强化对链表的理解&#xff0c;同时学习一些面试笔试题目的新思路以及加强对数据结构单链表的掌握。 目录 题目一.876. 链表的中间结点 - 力扣&#xff08;LeetCode&#x…

微服务学习|DSL查询语法、搜索结果处理、RestClient查询文档、黑马旅游案例

DSL查询语法 DSLQuery的分类 Elasticsearch提供了基于JSON的DSL (Domain Specific Language) 来定义查询。常见的查询类型包括: 查询所有:查询出所有数据&#xff0c;一般测试用。例如:match_all 全文检索 (full text)查询: 利用分词器对用户输入内容分词&#xff0c;然后去…