基于elementUi封装的表单组件

最新推荐文章于 2024-06-14 10:36:18 发布
最新推荐文章于 2024-06-14 10:36:18 发布
阅读量1.8k 收藏 9
点赞数
分类专栏： 随笔 VUE 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46058357/article/details/120828202
版权
VUE 同时被 2 个专栏收录
22 篇文章 3 订阅
订阅专栏
随笔
6 篇文章 0 订阅
订阅专栏

前言：本文章是vue中因为公司的项目页面牵扯到大量的表单，从而诞生，组件的源代码我会放到文章最后，文章写的可能不好，但是组件我觉得还是不错的,可以大幅度的提高开发页面的效率，有问题可以及时探讨QQ：1582340991

功能

提交校验，输入文本框校验，单个禁用，全局禁用，日期的区间选择，下拉框或者选择框选中某个特定的值其他文本框显示或者隐藏，远程搜索框，插槽

使用示例小demo

vue页面的配置

参数释义
data获取参数值
fields动态配置表单js
ref表单校验
all-disabled全局表单输入框禁用

提交时间我也加入里面了，提交就可以校验

<template>
    <div>
        <wti-form :data="originData"
                  :fields="fields"
                  ref="form_one"
                  :all-disabled="IsSuccess"
                  class="wti-form-style"/>
        <el-button type="primary" plain @click="submitForm">提交</el-button>
    </div>
</template>
<script>
    import wtiForm from '@/components/wti_form';
    import fields from './form.js';
    export default {
        name: 'ProjectCreateAdd',
        components: {
            wtiForm
        },
        data () {
            return {
                IsSuccess: false,// 全局禁用
                fields, // 基础信息
                originData: {
                    a1: '',
                }
            };
        },
        methods: {
            refPromise (form) {
                return new Promise(resolve => {
                    form.validate(v => {
                        resolve(v);
                    });
                });
            },
            submitForm () {
                this.refPromise(this.$refs.form_one)
                    .then(res => {
                        if (res) {
                            console.log(this.originData,'提交的表单');
                        }else{
                            this.$message.error('请完善表单信息');
                        }
                    });
            }
        }
    };
</script>
<style scoped lang="less">
</style>

form.js

动态表单配置

这个js就是一个最简单常见的输入框配置，简单看一下，下面我就会详细介绍

const fields = [
    {
        children: [
            {
                label: '姓名',
                type: 'input',
                key: 'a1',
                size: 6,
                prop: 'isPublic',
                rules: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
                disabled: {
                    self: false,
                    values: [],
                },
            },
        ],
    },
];
export default fields;

效果：
在这里插入图片描述
在这里插入图片描述

动态表单配置

这里分为公共和私有的，公共的就是所有的配置项都也可以用，私用的就只能特殊的使用，比如options数组select能用，input就用不了，以上面的js为例，fields是所有的配置，是个数组，每个对象是一行，children是每一行，里面的对象则是每个单独的表单项，输入框的placeholder已经集成在组件，所以可以不用写

参数释义是否必填
label单个输入表单的名字true
type对应的输入框，参数是input，select等等true
key这个值就是data中要绑定的参数true
size用的是elementui中的布局格式，一共24份，我这里一般是四列，所以我的参数是6.两列就是12true
prop和key值一样即可false
rules校验，支持element的校验规则配置false
disabled是否禁用，默认为不禁用，禁用{ self: false, values: [],}false
options下拉，多选，单选配置，里面有label，valuefalse
placeholder文本框的提示语句，默认请输入+label，也支持自定义false
isShow一般和有options的配置单使用，有两个参数{ key: ,values: [], } key是控制有isShow配置的表单，谁控制他填写谁的key，和options中的某一个values作为控制条件false
pickerOptions控制日期的区间的选择，太绕，我会在底下写上示例，比文字明白，上面那个也一样false
percentTexinput的单位参数false
inputType给input里面加入参数值number，可以给数字添加千分号false

1.普通输入框–input

配置：

 {
                label: '姓名',
                type: 'input',
                key: 'a1',
                size: 6,
                prop: 'isPublic',
                rules: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
                disabled: {
                    self: false,
                    values: [],
                },
                percentTex:'万元'
            },

效果
在这里插入图片描述

1.1. 金额+千分号的input

配置：

 {
                label: '金额',
                type: 'input',
                inputType: 'number',
                key: 'a2',
                size: 6,
                prop: 'isPublic',
                rules: [
                    {
                        required: true,
                        message: '请输入金额',
                        trigger: [ 'change', 'blur' ]
                    }
                ],
                disabled: {
                    self: false,
                    values: []
                },
                percentTex: '万元'
            }

效果
在这里插入图片描述

2.下拉框–select

配置：

  {
                label: '性别',
                type: 'select',
                key: 'a3',
                size: 6,
                prop: 'isPublic',
                rules: [
                    {
                        required: true,
                        message: '请选择性别',
                        trigger: [ 'change', 'blur' ]
                    }
                ],
                options: [
                    {
                        label: '男',
                        value: '0',
                    },
                    {
                        label: '女',
                        value: '1',
                    },
                ],
                disabled: {
                    self: false,
                    values: []
                },
            }

效果
在这里插入图片描述

2.1.下拉框的选项控制别的表单的显示隐藏

配置：

{
                label: '金额',
                type: 'input',
                inputType: 'number',
                key: 'a2',
                size: 6,
                prop: 'isPublic',
                rules: [
                    {
                        required: true,
                        message: '请输入金额',
                        trigger: [ 'change', 'blur' ]
                    }
                ],
                disabled: {
                    self: false,
                    values: []
                },
                isShow:{              // 注意这两行，就是被控制项的配置
                    key:'a3',
                    values:[ '0' ]
                },
                percentTex: '万元'
            },

效果：只有显示男的时候金额显示，其他的不显示
在这里插入图片描述
在这里插入图片描述

3.左右布局，单选—input-long

注释：页面统一左右布局的话，只需要在公共组件里面修改label-positio属性即可，入参和ElementUi同理
配置：

{
                label: '是否公共账户',
                type: 'input-long',
                key: 'a1',
                size: 6,
                prop: 'a1',
                customLayout: 'left',
                rules: [
                    {
                        required: true,
                        message: '请选择是否公共账户',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
                options: [
                    {
                        label: '是',
                        value: '1',
                    },
                    {
                        label: '否',
                        value: '0',
                    },
                ],
                disabled: {
                    self: false,
                    values: [],
                },
            },

效果
在这里插入图片描述

4.下拉搜索框—select-search

注：使用组件的页面要bind，然后在meath写入你的请求方法即可
配置：


        data () {
            fields[0].children[0].remoteMethod = this.remoteMethod(this).bind(fields[0].children[0]);
        },
        methods: {
            // 模糊查询
            remoteMethod ($this) {
                return function (query) {
                    this.loading = true;
                    $this.$ajax.queryProjectByProjectInfo({ likeProjectID: query }).then((res) => {
                        const { code, msg, data } = res;
                        if (code === 200) {
                            this.options = data.map(item => ({
                                label: `${item.projectID}（${item.projectName}）`,
                                value: item.projectID
                            }));
                        } else {
                            $this.$message.error(msg);
                        }
                    }).catch(err => {
                        console.log('项目代码接口报错：', err);
                        $this.$message.error('服务器错误，请联系管理员');
                    }).finally(() => {
                        this.loading = false;
                    });
                };
            },
        }

配置

 {
                label: '信托项目代码',
                type: 'select-search',
                loading: false, // 加载中
                remoteMethod: null,  //  fields[0].children[0].remoteMethod就是这个，我是fields第零个和children第零个的位置
                options: [],
                key: 'projectId',
                size: 6,
                prop: 'projectId',
                rules: [
                    {
                        required: true,
                        message: '请输入信托项目代码',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
                placeholder: '请输入',
            },

效果：
在这里插入图片描述

5. 文本域

注：sizeNumber为字符长度
配置：

{
                label: '备注信息',
                type: 'autosize',
                key: 'remarks',
                size: 12,
                prop: 'remarks',
                sizeNumber: '200',
                rules: [
                    {
                        required: false,
                        message: '请输入交易结构',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
            },

效果：
在这里插入图片描述

6.选择日期开始(年月日)–datetime2

配置：

  {
                label: '开户日期',
                type: 'datetime',
                key: 'a1',
                size: 6,
                prop: 'a1',
                rules: [
                    {
                        required: true,
                        message: '请选择开户日期',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
                placeholder: '请选择',
                disabled: {
                    self: false,
                    values: [],
                },
            },

效果：
在这里插入图片描述

6.1 选择日期开始(年月日时分秒)–datetime2

配置：
{
label: ‘开户日期’,
type: ‘datetime2’,
key: ‘a1’,
size: 6,
prop: ‘a1’,
rules: [
{
required: true,
message: ‘请选择开户日期’,
trigger: [ ‘change’, ‘blur’ ],
},
],
placeholder: ‘请选择’,
disabled: {
self: false,
values: [],
},
},
效果：在这里插入图片描述

6.2 选择器的特殊状态

注：pickerOptions属性key为max写入比自己大的区间参数key即可，key为min则相反，时分秒的同样适用
配置：

  {
                label: '开户日期',
                type: 'datetime',
                key: 'a1',
                size: 6,
                prop: 'a1',
                rules: [
                    {
                        required: true,
                        message: '请选择开户日期',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
                placeholder: '请选择',
                disabled: {
                    self: false,
                    values: [],
                },
 },
 {
            label: '销户日期',
                type: 'datetime',
                key: 'a2',
                size: 6,
                prop: 'a2',
                rules: [
                    {
                        required: true,
                        message: '请选择销户日期',
                        trigger: [ 'change', 'blur' ],
                    },
                ],
                placeholder: '请选择',
                disabled: {
                    self: false,
                    values: [],
                },
                pickerOptions: {
                    max: 'a1',     // a1日期之后
                }，
                  // pickerOptions: {
                //     min: 'a1',      // a1日期之前
                // },
                // pickerOptions: {
                //     before: true      // 当前日期之后
                // },
                // pickerOptions: {   // // 当前日期之前
                //     after: true
                // },
  }

效果：
max时
在这里插入图片描述
min时
在这里插入图片描述

5.联级选择器

提取：

链接：https://pan.baidu.com/s/1HKwZYOi0dfF39g9VHSyiEA 
提取码：brp0

累了，太多了，等我后续更新
未完待续…

山岗下的星空
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
学习日志-《掘金/知乎-低代码》笔记
pengxiao1991的博客
12-27 1004
前言 本文记录了学习《掘金/知乎-低代码》过程中的所有笔记。 前端智能化看“低代码/无代码”https://juejin.cn/post/6959794588898820127 今天的人们越来越难以被提前定制好的软件所满足。低代码/无代码开发则赋予人们创造软件的能力，进而帮助人们低成本、即时、高效的直接生产符合自己需求的软件，进而操作众多复杂的电子设备和数字世界建立联结。我认为，这是不可逆的趋势，也是低代码/无代码开发的大方向。 阿里的各种cook，以及他.
154. Python语言 的 Flask框架项目前导 之 Flask框架补充 第一章 ：WTForms 表单验证
sinat_38761218的博客
02-03 153
Python语言 的 Flask框架项目前导 之 Flask数据库 第六章 ：
form表单属性赋值常用方法
gp_911014的博客
05-23 1803
【代码】form表单属性赋值常用方法。
elementUI表单封装
qq_34442584的博客
08-04 988
elementUI表单封装根据项目需要封装elementUI表单html代码js代码使用 根据项目需要封装elementUI表单 html代码 <template> <!--是否行内表单--> <el-form ref="form" :inline="inline" :model="formObj.form" :label-width="labelWidth" :rules="formObj.rules" class="elform"> <!--标签
vue2 + element-ui，前端配置化表单封装（2024-06-14）
最新发布
hap1994的博客
06-14 1800
如何定义「巨型」表单，这个因人而异。但如果只是一些：收货人信息、登陆、注册的这种比较简单的表单，那肯定算不上巨型，直接常规开发写模版就好了，没有必要为了配置化而配置化～从笔者的理解出发，表单项非常多，比如笔者曾经负责的「投放系统」，随随便便提交时都会涉及几十甚至上百个字段，这样整个表单会有几十、上百个表单项组成，这就算得上是巨型表单了。先给大家看看成品的其中的一小块截图～别看到截图好像表单项也就那样，根据右栏数起来共40+个，但是这个只是初期版的，还有很多字段是没接进来的；
Element UI el-form 表单封装思路
i_Satan的博客
05-31 1344
将不同类型的组件都封装进一个组件，然后利用 v-if 根据传入的 type 来进行判断展示某一个表单的展示和隐藏。
elementui中el-table表格封装成组件
L_WalkingPig的博客
07-14 1102
子组件表格dialog封装结构如图： <el-dialog :title="propsSelectData.title" :visible.sync="propsSelectData.visibleMultiSelectDialog" width="40%" :showClose="false" :modal='false' :close-on-click-modal
基于elementUI封装了基础表单组件
梅花寺
10-13 1028
包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴
基于element组件库封装的动态表单组件
07-15
"基于element组件库封装的动态表单组件"就是这样一个解决方案，它针对Vue3进行了优化，旨在帮助开发者更方便地创建和管理动态表单。 动态表单是一种能够根据数据结构自动生成表单的组件，通常用于处理复杂的表单...
基于elementui 的表单设计器
03-16
基于ElementUI的表单设计器，就是利用ElementUI提供的组件，构建一个可视化的设计平台，用户可以自定义表单布局、字段类型、验证规则等。 三、表单设计器的关键功能 1. **字段选择**：提供多种输入元素，如文本框、...
基于elementui的form表单实现的一个高拓展性的表格布局组件
08-10
本文将深入探讨如何利用Element UI的Form表单组件构建一个高拓展性的表格布局组件。 首先，Element UI的Form组件提供了强大的表单处理能力，它支持各种表单元素如Input、Select、Checkbox、Radio等，并且具有表单...
二次封装element组件
02-04
Element UI 提供了包括按钮（Button）、表单（Form）、表格（Table）、导航（Navigation）等多种基础和复杂的UI组件，它们遵循Material Design 设计规范，具有统一的交互效果和视觉风格。通过二次封装，我们可以更...
vue复杂的form表单封装和使用
09-01
1、该组件封装了表单中的输入框、密码框、文本域、下拉框、单选、多选、日期、文件上传、按钮等元素； 2、动态设置表单排列样式； 3、使用slot，灵活修改元素； 4、组件可以直接使用，使用简单，方便，有使用示例和...
ElementUI-Form表单二次封装
Miketutu的博客
06-01 4617
ElementUI-Form表单二次封装
form表单的三种封装方法（Vue+ElementUI）
WY_ALA的博客
10-16 2853
这里的要点主要有： 监听表单组件的数据变化： 每个表单组件都有一个name标识它的业务含义，绑定的数据也是formData[field.name]，@input事件传递updateForm，在updateForm里面更新this.formData[name]，保证了this.formData里面的数据是和表单组件选择/填写的内容一致。重置时改变表单组件的数据： 因为组件内部会监听父元素的value，所以这里只要清空this.formData的值，组件内部的数据也会跟着清空。
Vue2+ElementUI表单、Form组件的封装
qq_43657722的博客
03-12 1680
在 Vue2 项目中，ElementUI 的 `el-form` 组件是常用的表单组件。它提供了丰富的功能和样式，可以满足各种需求。但是，在实际开发中，我们经常会遇到一些重复性的需求
对于elementui中from表单的封装
不上班老板怎么买房买车
03-21 1793
对于elementui中from表单的封装
【ElementUI组件封装】搭建架子、按钮自行封装、封装element的表格、表单
前端知识分享喵
07-21 982
有了前面封装表单的基础，要是顺手把表格也做一番封装，那么我们在处理这类增删改查页面的时候，就能节省出更多的时间去处理其它的事情，从而提高开发效率。像：后台管理系统的页面有一些表单增删改操作，这里面的控件名称和所用到的控件不一样外，逻辑大体相同。明明人家已经提供了相对完善的 UI 组件库、并且大部分想要的效果都已经有了，我们是没有必要再去浪费时间在这个上面的，应该更多的去关注业务逻辑的实现。像表格数据配置、操作列的、批量处理的、分页的、列数据个性化的等等，太多了就不一一列举了。
element Ui table表格二次封装
weixin_51569223的博客
09-20 689
使用了$attrs来传递组件之间的数据，保留组件的属性和功能，对于特殊的类容（如按钮，不同的类容）用函数式组件来渲染。（注：vue3 直接用$attrs就可以了，vue2 使用v-bind 和 v-on，）home页面 （注：render里写法有些可能会报jsx错，是因为解析不了 在script里写jsx就可以了）tabelMixin.js 抽离出请求数据 和分页的混合 也可以把筛选，重置等方法写里面。2.表格可添加标签、按钮或者其它操作功能。3.宽度高度，对齐等 可直接使用。
elementui的表单如何封装成组件
03-28
2. 在组件中引入 ElementUI 的表单组件和相关组件库，例如 Input、Select、Radio 等。 3. 在组件中定义表单的数据模型和校验规则。 4. 使用 ElementUI 的表单组件和相关组件库，将表单的各个字段进行渲染，并绑定...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值