0.0.9 • Published 3 years ago
基于 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 后置 |