@mosowe2/element-pro：【proForm】基于elementUI2.x版本的高级表单

proForm

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

1. 自动生成布局

2. 支持远程

3. 支持联动

4. 支持原有属性事件

5. select多选自动加全部，选择全部其他不可选

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: '测试的文字',
                        isHidden: false,
                        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，其中，select的remoteMethod远程搜索方法增加一个form实例，及一个回调函数，回调函数接收一个enum类似的格式：remoteMethod(query,form,callback)=>{}	options	是
formItemOptions	formItem组件的Attributes，新增col，formItem所占父级的栅栏数，支持Layout布局的col所有属性，prop属性可以不写，写的话需要与groupFormItems[prop]的prop一致，新增isHidden属性，是否隐藏表单	object	是

groupFormItems.options

属性	说明	类型	必填
对应表单元素的属性	-	-	-
col	表单组件所占父级的栅栏数，支持Layout布局的col所有属性	object	否
enum	可以使key-value键值对，也可以是{label，value}组成的数组，多选时自动添加第一项全部	object/array	否
notAll	select组件多选情况下，无论有没有数据都不展示全部，即下拉没有全部选项	boolean	否
noDateNoAll	select组件多选情况下，没有数据且默认值不为全部时不展示全部选项，有数据时展示全部，如果默认值时全部，name就不需要配置此项，全部的固定关键字是all	boolean	否

options.events

事件	说明	回调参数
[prop].focus	组件focus事件，若原组件有	（e,form，callback）e是组件元素，form为组件实例，callback返回一个列表，将会赋值到该组件enum上，主要是select使用
[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，callback）e是组件当前值，form为组件实例，callback返回一个列表，将会赋值到该组件enum上，主要是select使用
[prop].select	组件select事件，若原组件有，目前就InputAutoComplete组件有	（e,form）e是组件当前值，form为组件实例
[prop].visibleChange	组件下拉展开、隐藏事件	（e,form，callback）e是boolean类型，true展开，false隐藏，form为组件实例，callback返回一个列表，将会赋值到该组件enum上，主要是select使用
[prop].removeTag	组件多选时，移除已选项触发	（e,form，callback）e是boolean类型，true展开，false隐藏，form为组件实例，callback返回一个列表，将会赋值到该组件enum上，主要是select使用
[prop].expandChange	级联组件展开下一级事件	（e,form）e是各父级选项值组成的数组，form为组件实例

proForm events

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

proForm slot

slot	说明
[prop]	formItem的默认插槽
[prop]-label	formItem的label插槽
[prop]-after	formItem后面的插槽，不在formItem内
form-title-[groupKeyName]	分栏标题插槽，参数：title={title,className,icon}
form-after	form组件后置插槽，紧跟formItem组件，在form组件内，可以使用col组件进行自适应，参数：events={submitForm,resetForm}

使用方法

安装

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
...配置
></proForm>

代码示例

ppt配置详解