proForm：基于elementUI2.x版本的高级表单

通过配置自动生成表单页面：

自动生成布局
支持远程
支持联动
支持原有属性事件等

Attributes

参数	说明	类型	必填	默认
options	配置，options	object	是
value	默认值，键值对，key为options里面的prop	object	是
footer	是否显示组件提交、重置按钮	boolean	否	true
justShow	是否只读，可编辑时，上下间距为15px，只读时为10px	boolean	否	false

示例结构，[prop]为数据关键字，[groupKeyName]为分栏关键字，均唯一：

// 配置
options = {
    form: {
        labelWidth: '100px',
        labelPosition: 'left'
    },
    list: {
        [groupKeyName]: {
            groupTitle: '第二个组件',
            groupTitleIcon: 'el-icon-s-finance',
            groupCol: { span: 24 },
            groupFormItems: {
                [prop]: {
                    component: 'Input',
                    options: { // component options
                        placeholder: '请输入',
                        clearable: true,
                        prefixIcon: 'el-icon-user-solid',
                        col: { span: 12 },
                    },
                    formItemOptions: {
                        label: '姓名',
                        col: { span: 12 },
                        slotAfter: '测试的文字',
                        rules: [
                            {
                                required: false,
                                message: '必填！'
                            }
                        ]
                    }
                },
            }
        },
    },
    events: {
        [prop]: {
            change: (e, form) => {
                console.log(form)
            }
        }
    }
}
// 默认值
const value = {

    [prop]: '小红'

}

proForm options

属性	说明	类型	必填
form	form组件的配置，支持所有属性，model已被单独提出来作为value传入	object	否
list	分栏配置，子元素[groupKeyName]为分栏的标识且唯一，开发者自定义，list.[groupKeyName]	object	是
events	组件单元的事件，events	object	否

options.list.[groupKeyName]

属性	说明	类型	必填
groupTitle	分栏标题，为空则不显示	string	否
groupTitleClass	分栏标题的class	string	否
groupTitleIcon	分栏标签文字前面的icon	string	否
groupCol	分栏所占栅栏数，支持Layout布局的col所有属性	object	否
groupFormItems	分栏表单的单元配置，子元素[prop]为表单的输出字段且唯一，也是form-item的prop属性，groupFormItems	string

options.list.[groupKeyName].groupFormItems

属性	说明	类型	必填
component	组件类型，可选：Cascader, Checkbox, Date, Input, InputNumber,InputAutoComplete, Radio, Select, Switch, Time	string	是
options	对应该组件的Attributes，新增col，表单组件所占父级的栅栏数，支持Layout布局的col所有属性，新增enum枚举，可以使key-value键值对，也可以是{label，value}组成的数组，其中，select的remoteMethod远程搜索方法增加一个form实例，及一个回调函数，回调函数接收一个enum类似的格式：remoteMethod(query,form,callback)=>{}	object	是
formItemOptions	formItem组件的Attributes，新增col，formItem所占父级的栅栏数，支持Layout布局的col所有属性，prop属性可以不写，写的话需要与groupFormItems[prop]的prop一致	object	是

options.events

事件	说明	回调参数
[prop].focus	组件focus事件，若原组件有	（e,form）e是组件当前值，form为组件实例
[prop].blur	组件blur事件，若原组件有	（e,form）e是组件当前值，form为组件实例
[prop].clear	组件clear事件，若原组件有	（e,form）e是组件当前值，form为组件实例
[prop].input	组件input事件，若原组件有	（e,form）e是组件当前值，form为组件实例
[prop].change	组件change事件，若原组件有	（e,form）e是组件当前值，form为组件实例
[prop].select	组件select事件，若原组件有，目前就InputAutoComplete组件有	（e,form）e是组件当前值，form为组件实例

proForm events

方法	说明	参数
submit	内部提交按钮点击事件，已校验rules	表单数据
reset	内部重置按钮点击事件	表单数据

proForm slot

slot	说明
[prop]	formItem的默认插槽
[prop]-label	formItem的label插槽
[prop]-after	formItem后面的插槽，不在formItem内
formTitle[groupKeyName]	分栏标题插槽
formAfter	form组件后置插槽，紧跟formItem组件，在form组件内

使用方法安装

npm i @mosowe2/element-pro

配置

main.js配置，因为是依赖@vue/composition-api和element-ui，所以这两个也是要安装和配置的

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';
import ElementPro from '@mosowe2/element-pro' // 引入


Vue.config.productionTip = false;
Vue.config.silent = true;
Vue.use(VueCompositionApi);
Vue.use(ElementUI,{size:'mini'});
Vue.use(ElementPro) // 配置

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

使用

.vue文件中直接使用

代码示例

proForm：基于elementUI2.x版本的高级表单

Java相关栏目本月热门文章