基于elementUi封装的表单组件

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
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值