基于 element-ui 封装

的 table、form、search-form 组件 vue2 版本

Table

Table Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | ------------------------------------------------------------ | ------ | ------ | ------ | | columns | 表格列的配置项 详细配置看下下方 | array | — | — | | commonColumnOptions | 表格列的公共配置，element-ui table-column 的 props 配置，该配置应用到每一列，会被 columns 中的配置覆盖 | object | — | — | | nullValueDefault | 如果列的值为空时 默认显示的 value | string | — | — | | selectOptionMap | enumList 需要异步获取时，可用此字段传值，此时 enumList 为字段名 | object | — | — |

其他所有 attrs 都会作为 el-table 的 props, 所有事件都会传递给 el-table

Table column Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------------------------------------------ | ---------------------- | ------ | ------ | | style | el-table-column 的样式配置 | object | — | — | | class | el-table-column 的类名配置 | string object array | — | — | | on | el-table-column 的事件监听，具体事件查看官网，所有函数的 this 指向的该组件的父级，也就是说 this 指向的是当前使用 table 的组件，方便数据的使用 | object | — | — | | slot | 可以是 function 和 string 类型，function 类型直接调用 传参 ( h, row, column ) 可以返回 html 字符串，vNode, 带有 name 属性的配置对象，name 可以是组件名称，或者 vue 组件，其余属性会当做 h 函数的第二个参数；string 类型匹配插槽，可以是一个对象传多个插槽名（default,header） | function,object,string | — | — | | children | 嵌套 column 配置，用来设置多级表头 | array | — | — | | formatter | 列数据的格式化函数，return 的值将作为该列显示的值 | function | — | — | | unit | 如果传入该值将跟该列数据拼接， | string | — | — | | type | 除了 el-table 中 “selection/index/expand” 类型还可以是自己注册过枚举类型，传入该字段会匹配一个 使用 use 方法注册的插件方法生成列数据 传入 （h, row, column）改方法的 this 指向 table 组件 | string | — | — | | enumList | 枚举匹配数组，子项为 label,value 键值对，列项的值跟 value 匹配 | sting | — | — |

Table methods

| 方法名 | 说明 | 参数 | | ------------------ | ------------------------------------------------------------ | ------------------------------ | | registerColumnType | 可以用于注册 type枚举类型，第一个参数传入枚举类型名称，第二个注册函数需要返回一个 handler 方法，第三个为配置项 handler 可以访问，handler this 会被重新指向为 table， 传参 （h, row, column） 需要返回 vNode 类型， | function(name, plugin,options) |

Form

Form Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ------------------------------------------------------------ | ------- | ------ | ------ | | v-model/value | 双向绑定的表单数据, 同 el-form 的 model | object | — | — | | initFormData | 表单默认值， | object | — | — | | formItems | 表单 item 配置项，具体配置看下方 form-item attributes | array | — | — | | colLayout | el-form-item 的布局配置，具体配置查看 el-col | object | — | — | | formItemAttrs | el-form-item 的公共 props ，会被 formItems 中的配置覆盖 | object | — | — | | rowAttrs | el-row 的 props | object | — | — | | defaultInputAttrs | el-form-item 下的 所有input select 等表单元素的公共配置项 | object | — | — | | selectOptionMap | el-select 的 options 配置 通过formItem 传入相应 key 取值，通常是当 select 的值是异步获取时使用， | object | — | — | | autoClearValidate | 自动清除表单校验，需要祖先组件提供 “dialogVisible” provide 必须是一个函数，监听 dialogVisible 为 false 时调用 clearValidate | Boolean | — | true |

其余 attrs 都会当作 props 传给 el-form

Form methods

| 方法名 | 说明 | 参数 | | ---------- | ----------------------- | ---- | | validate | 同 el-form | — | | getFormRef | 返回 el-form 组件的引用 | — |

其余 el-form 方法都可以通过组件引用调取

Form Item Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | ------------------------------------------------------------ | --------------- | --------------------- | ------ | | prop | 同 el-form-item | string | — | — | | label | 同 el-form-item | string | — | — | | type | el-form-item 下的表单元素名 | string | el-input el-select 等 | — | | options | el-select 的 options 配置，当是 string 类型时，回到 selectOptionMap 中取值 | array string | — | — | | renderLabel | el-form-item 中 label 值，如果该值是 string 时，将作为插槽名 | function string | — | — | | isHidden | 是否隐藏该项 | boolean | — | — | | layout | 该项的 el-col props | object | — | — | | style | el-form-item 样式 | object | — | — | | class | el-form-item 类名 | object arrary | — | — | | slotName | el-form-item 下表单元素的插槽名 | string | — | — | | inputAttrs | el-form-item 下表单元素的配置项 { props, on, class, style } | object | — | — | | placeholder | el-form-item 下表单元素的 placeholder | string | — | — |

其余项将会传递给 form-item 的 props

Form Item inputOptions

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | ---------------------------------- | ------------ | ------ | ------ | | props | el-form-item 下表单元素的 props | object | — | — | | on | el-form-item 下表单元素的 监听事件 | object | — | — | | style | el-form-item 下表单元素的 样式 | object | — | — | | class | el-form-item 下表单元素的 类名 | object array | — | — |

SearchForm

Search-form Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------- | ------------------------------------------------------------ | ------------ | ------------- | ------ | | v-model/value | 绑定的 表单数据 | object | — | — | | formItems | 表单配置项 | array | — | — | | gutter | 表单项间隔 | number | — | 0 | | size | 表单项下的组件尺寸 | string | 同 element-ui | small | | inputClass | 表单项下表单元素类名 | object array | — | — | | labelSuffix | 表单项 label 后缀 | string | — | — | | flexWrap | 宽度超出是否换行 | boolean | — | false | | commonFormProps | 应用到每个表单的props | object | — | — | | selectOptionMap | el-select 的 options 配置 通过formItem 传入相应 key 取值，通常是当 select 的值是异步获取时使用， | object | — | — |

Search-form Item Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ------------------------------------------------------------ | ------------ | ------------ | ------ | | label | 表单 label | string | — | — | | labelSlotName | 表单 label 插槽名 | string | — | — | | prop | 表单域字段 | string | — | — | | type | 表单项下的表单元素类型,element-ui 元素，也可以是全局注册过的组件名或者直接传递一个vue组件 | string | input,select | — | | options | el-select 的 options 配置，当是 string 类型时，回到 selectOptionMap 中取值 | array string | — | — | | on | 表单项下的表单元素事件监听 | object | — | — | | class | 表单元素类名 | object array | — | — | | slotName | 表单元素插槽名 | string | — | — |

**其余配置全部传给表单元素

Search-form slot 插槽

| name | 说明 | | ------ | -------------- | | before | form-item 前置 | | after | form-item 后置 |