vue + element UI 表单中内嵌自定义组件的表单校验触发方案

这篇具有很好参考价值的文章主要介绍了vue + element UI 表单中内嵌自定义组件的表单校验触发方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求描述

在表单中,可能部分表单项需封装成自定义组件,如何在表单提交时,能同步触发自定义组件的表单校验?

解决方案

将表单绑定的变量传入自定义组件中,在自定义组件中定义表单校验规则

完整代码范例

表单嵌套组件 组件内怎么验证,# Element UI,# Vue,# 已归档链接,vue.js,elementui

表单

内嵌自定义组件
src\test\index.vue

<template>
  <div style="padding: 30px; width: 300px">
    <el-form ref="formRef" :model="searchData" label-width="80px" size="mini">
      <el-form-item
        label="姓名"
        prop="name"
        :rules="{ required: true, message: '不能为空' }"
      >
        <el-input v-model="searchData.name"></el-input>
      </el-form-item>

      <SearchJob :searchData="searchData" />

      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SearchJob from "./search_job.vue";
export default {
  components: {
    SearchJob,
  },
  data() {
    return {
      searchData: {},
    };
  },
  mounted() {},
  methods: {
    search() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert("通过表单校验,开始搜索!");
        }
      });
    },
    reset() {
      this.searchData = {};
    },
  },
};
</script>

内嵌组件

src\test\search_job.vue文章来源地址https://www.toymoban.com/news/detail-623937.html

<template>
  <el-form-item
    label="工作"
    prop="job"
    :rules="{ required: true, message: '不能为空' }"
  >
    <el-input v-model="searchData.job"></el-input>
  </el-form-item>
</template>

<script>
export default {
  props: {
    searchData: Object,
  },
};
</script>

到了这里,关于vue + element UI 表单中内嵌自定义组件的表单校验触发方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

        1、本组件支持列表的表头自定义配置,checkbox实现 2、本组件支持列表列排序,vuedraggable是拖拽插件,上图中字段管理里的拖拽效果 ,需要的话请自行npm install 3、本组件支持查询条件动态配置,穿梭框实现 https://download.csdn.net/download/askuld/88216937

    2024年01月16日
    浏览(60)
  • 【分页表格】Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)

    这篇文章,主要介绍Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)。 目录 一、分页表格 1.1、运行效果 1.2、运行环境 1.3、案例代码

    2024年02月11日
    浏览(55)
  • vue中element ui 中tree组件怎么自定义前缀图标呢?

    一 问题  饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占位但是空白的) 按照官网文档, 设置icon-class设置自定义图标代替默认箭头, 但是展开和收

    2024年02月13日
    浏览(50)
  • vue项目element-ui上传组件自定义方法无法获取进度

    原因:element-ui中的up-load组件使用时,若用自定义上传http-request,会重新申明XMLHttpRequest,on-progress里的申明则被覆盖,无法使用该钩子,无法添加进度条 方案一:假进度条;写个假进度条优化用户体验,使用el-upload组件里on-change方法的status状态,配合定时器 ,以vue3为例 ,

    2024年02月15日
    浏览(50)
  • element plus自定义组件表单校验

    方式一: 方式二: element ui 自定义组件校验方式,详见以下链接地址 使用element Form 自带校验功能,实现上传控件的校验_element form 校验mixin-CSDN博客​​​​​ ant design vue 1.x 自定义组件校验方式,详见以下链接​​​​​​​ant design vue1.x 自定义校验_1.x ant-design-vue date-ran

    2024年02月01日
    浏览(55)
  • element-ui表单自定义校验

    1.问题描述 项目开发过程中,遇到表单校验,这次的校验规则比较严,element-ui表单自带的校验完全解决不了问题。 2.解决方法 使用elementui表单校验中的自定义校验,validUsername是自定义的校验方法名称 2.1 定义表单校验: 2.2 自定义校验方法: 注意:方法中一定义要返回call

    2024年02月11日
    浏览(45)
  • vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。

    当我们项目中用到的表格太多的话,就会导致我们的代码量一直增加,所以我们要封装一个公共得组件,通过传参引入来使用,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。 提示我们要安装 create-vite@4.1.0 得依赖

    2024年02月02日
    浏览(66)
  • element ui 自定义校验不进入表单validate验证

    解决表单提交验证时自定义的校验规则错误问题 错误代码: 这段代码中只有value为空、不是整数才执行,当为整数的时候没有返回对于的执行函数callback(); 所以为整数时返回执行函数callback() 正确代码: 结束语: 希望这篇文章能帮助到大家,如有不对之处,还请指正。愿我

    2024年02月11日
    浏览(50)
  • element-ui部分表单组件的必填校验问题

    el-date-picker 必填校验 el-cascader 必填校验

    2024年02月12日
    浏览(47)
  • 基于vue和element-ui的表格组件,主推数据渲染,支持内容和方法灵活绑定,提供动态具名插槽自定义内容

            组件名为commonTable,主要是基于element-ui中的表格组件进行二次封装的组件,集成了常用的表格功能,除默认内容的显示外,还包括以下几点:         1. 状态的筛选和显示;         2. 操作按钮的显示和方法绑定;         3. 自定义具名插槽内容的封装;      

    2024年02月07日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包