pd-simple-ui-vue2
0.0.9 • Public • Published 基于 element-ui 封装
的 table、form、search-form 组件 vue2 版本
参数 |
说明 |
类型 |
可选值 |
默认值 |
columns |
表格列的配置项 详细配置看下下方 |
array |
— |
— |
commonColumnOptions |
表格列的公共配置,element-ui table-column 的 props 配置,该配置应用到每一列,会被 columns 中的配置覆盖 |
object |
— |
— |
nullValueDefault |
如果列的值为空时 默认显示的 value |
string |
— |
— |
selectOptionMap |
enumList 需要异步获取时,可用此字段传值,此时 enumList 为字段名 |
object |
— |
— |
其他所有 attrs 都会作为 el-table 的 props, 所有事件都会传递给 el-table
参数 |
说明 |
类型 |
可选值 |
默认值 |
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 |
— |
— |
方法名 |
说明 |
参数 |
registerColumnType |
可以用于注册 type枚举类型,第一个参数传入枚举类型名称,第二个注册函数需要返回一个 handler 方法,第三个为配置项 handler 可以访问,handler this 会被重新指向为 table, 传参 (h, row, column) 需要返回 vNode 类型, |
function(name, plugin,options) |
参数 |
说明 |
类型 |
可选值 |
默认值 |
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
方法名 |
说明 |
参数 |
validate |
同 el-form |
— |
getFormRef |
返回 el-form 组件的引用 |
— |
其余 el-form 方法都可以通过组件引用调取
参数 |
说明 |
类型 |
可选值 |
默认值 |
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
参数 |
说明 |
类型 |
可选值 |
默认值 |
props |
el-form-item 下表单元素的 props |
object |
— |
— |
on |
el-form-item 下表单元素的 监听事件 |
object |
— |
— |
style |
el-form-item 下表单元素的 样式 |
object |
— |
— |
class |
el-form-item 下表单元素的 类名 |
object array |
— |
— |
参数 |
说明 |
类型 |
可选值 |
默认值 |
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 |
— |
— |
**其余配置全部传给表单元素
name |
说明 |
before |
form-item 前置 |
after |
form-item 后置 |
Dependencies (2)
Dev Dependencies (20)
Package Sidebar
Install
Weekly Downloads