element UI 组件封装--搜索表单(含插槽和内嵌组件)

这篇具有很好参考价值的文章主要介绍了element UI 组件封装--搜索表单(含插槽和内嵌组件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element UI 组件封装--搜索表单(含插槽和内嵌组件)

组件封装–搜索表单 searchForm.vue

可根据需要,参考姓名和工作自行增加更多常用的默认搜索项

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

      <SearchJob v-if="searchOption.job" :searchData="searchData" />
      <slot> </slot>

      <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,
  },
  props: {
    searchData: Object,
    searchOption: Object,
  },
  methods: {
    search() {
      this.$refs.searchFormRef.validate((valid) => {
        if (valid) {
          alert("通过表单校验,开始搜索!");
        }
      });
    },
    reset() {
      this.$emit("reset");
    },
  },
};
</script>

内嵌组件 search_job.vue

具体原理可参考
https://blog.csdn.net/weixin_41192489/article/details/127966234文章来源地址https://www.toymoban.com/news/detail-455981.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>

使用方法 index.vue

  • 可直接在 SearchForm 内部通过默认插槽添加更多搜索项
  • 必要变量有 searchData 和 searchOption
  • 必要方法有 reset
<template>
  <div style="padding: 30px; width: 300px">
    <SearchForm
      :searchData="searchData"
      :searchOption="searchOption"
      @reset="reset"
    >
      <el-form-item
        label="爱好"
        prop="hobby"
        :rules="{ required: true, message: '不能为空' }"
      >
        <el-input v-model="searchData.hobby"></el-input>
      </el-form-item>
    </SearchForm>
  </div>
</template>

<script>
import SearchForm from "./searchForm.vue";
export default {
  components: {
    SearchForm,
  },
  data() {
    return {
      searchData: {},
      // 搜索表单的配置--是否显示默认搜索项
      searchOption: {
        labelWidth: "100px",
        size: "small",
        name: true,
        job: true,
      },
    };
  },
  methods: {
    reset() {
      this.searchData = {};
    },
  },
};
</script>

到了这里,关于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)
  • mpVue 微信小程序基于vant-weapp 组件的二次封装TForm 表单组件(修改源码插槽使用)

    1、mpVue微信小程序不支持动态组件(component ) 2、mpVue微信小程序不支持动态属性及事件穿透( $attrs 和 $listeners ) 3、mpVue微信小程序不支持 render 函数 TForm 表单组件 代码示例: 参数 说明 类型 默认值 className 自定义类名 String - listTypeInfo 下拉选择数据源(type:\\\'date/datetime/ra

    2024年02月16日
    浏览(68)
  • 基于Element-ui 表单弹窗列表选择封装

    不知道怎么描述这个东西了。。el-select下拉框大家都知道,但是下拉框只能选择一个,而且如果数据太多的话也不太容易选择,所以这里就是封装了组件包含对应的弹窗,就是能实现多选,而且列表也是分页展示的,选择完之后将对应的名称展示在文本框中,传给后端对应的

    2024年02月11日
    浏览(41)
  • Vue-Element-Admin项目学习笔记(9)表单组件封装,父子组件双向通信

    前情回顾: vue-element-admin项目学习笔记(1)安装、配置、启动项目 vue-element-admin项目学习笔记(2)main.js 文件分析 vue-element-admin项目学习笔记(3)路由分析一:静态路由 vue-element-admin项目学习笔记(4)路由分析二:动态路由及permission.js vue-element-admin项目学习笔记(5)路由分析

    2024年02月11日
    浏览(53)
  • Element UI 日期封装自定义组件

    日常工作中我们会遇到要封装日期组件的情况,例如:element组件日期选择开始时间,结束时间组件不能直接使用时,重复使用到日期选择,我们就不得不去封装。 其实很简答,我不做过多讲解,直接上代码,急拿急用。 代码如下(示例): 代码如下(示例): 这样就可以

    2024年02月15日
    浏览(34)
  • 下拉框组件的封装(element ui )

         当使用 Element UI 封装下拉框组件时,通常需要考虑以下几个方面:组件的基本结构、数据的传递与绑定、事件处理以及样式的定制。接下来,我将详细介绍如何针对这些方面进行封装。     首先,我们需要创建一个 Vue 组件来封装下拉框。在 Vue 项目中,通常将组件的模

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

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

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

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

    2024年02月12日
    浏览(48)
  • 基于element UI input组件自行封装“数字区间”输入框组件

    在开发时遇到一个 数字区间 输入框的需求,如下图: 项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满

    2024年02月11日
    浏览(44)
  • Vue + Element UI 前端篇(七):功能组件封装

    为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言切换也被封装成为了组

    2024年02月09日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包