@yqg/vue

1.21.3 • Public • Published a year ago

这个 package 主要定位于将非 BaseUI 的一些公用 vue 组件、插件等收敛在一起，便于在项目间共用。

antd components

yqg-simple-form

表单组件

def-value

主要给yqg-simple-table、yqg-static-form使用的根据fieldDef展示field的组件, 也可单独使用

Property	Description	Type	Default Value
def	def option，详见yqg-simple-table、yqg-static-form	Object	required
value	字段值	[String, Number, Array, Boolean, Object]	''
defaultText	value 为空时展示	String	''

展示类型

Type	Value Type	View
type: 'date'	timestamp	日期
type: 'dateTime	timestamp	日期时间
type: 'time'	timestamp	时间
type: 'rich'	string	HTML
配置了filter	--	filtered value
配置了formOptions	Array	yqg-static-form
配置了tableOptions	Array	yqg-simple-table

yqg-static-form 静态展示表单

Form

Property	Description	Type	Default Value
ctx	一般是父级this	Object	this.$parent
title	表单标题，一般在使用modal时配置	string\|slot	''
values	数据对象	Object	null
options	表单配置对象	Object	required
layout	表单布局 inline\|horizontal\|verticla\| inline一般用于查询表单，horizontal一般用于弹窗提交表单，vertical可以配合column属性使用	String	'inline'
hideInvalid	隐藏空值field (!value && value !== 0)	Boolean	false

Form.options

Property	Description	Type	Default Value
layout	表单布局，同Form.layout	Object	'inline'
column	配合vertical，多列展示，如{span: 12}, 2列	Object	null
labelCol	label布局	Object	{span: 4}
wrapperCol	输入控件布局	Object	24-labelCol.span
staticItemProps	Form.Item.props	Object	{colon: false}
fieldDefs	表单fields配置项	Array	required

FieldDefOption

注: 对于static-form，field内容展示有三种情况：slot | 通过staticComp配置的自定义组件 | def-value

Property	Description	Type	Default Value
field	字段key	String\|slot	required
label	字段名称	String	若不配置，则不展示label占位;若需要占位但不展示label，可配置为空格' '
type	控件类型, def-value根据type对展示内容进行处理	String	--
enumType	enum，枚举类控件需要配置	String\|Object\|Enum	--
enumOptions	同@yqg/enum EnumOption, 若配置的i18n key 对应的是一个Array，则需配置	Object	--
format	用于格式化value，详见util/format.js, 可自定义	String\|Object	--
hide	是否隐藏field	Boolean\|function({record, values, ctx}) => hideValue:Boolean	fales
staticComp	若配置则展示自定义组件	Component	--
staticProps	field组件props, 可用于设置样式等	Object	--
staticItemProps	a-form-item props	Object	--

yqg-simple-table

表格

Table

Property	Description	Type	Default Value
ctx	一般为父组件this	Object	this.$parent
options	table配置	Object	required
records	数据数组	Array	null
pagination	分页数据对象	Object\|Boolean	{}
defaulPagination初始化分页对象配置	Object	{pageSizeOptions: ['10', '20', '50', '100', '200'],showSizeChanger: true}
simpleEmpty	无数据时只展示“暂无数据“	Boolean	false
fontSize	字号	Number	13
cellHorizontalPadding	单元格内边距	Number	20
paginationInfinite	是否启用无限翻页模式	Boolean	false

Table.options

Property	Description	Type	Default Value
colDefs	数据列配置	Array	[]
search	是否开启表内搜索	Boolean	false
enableClientSort	是否开启客户端排序	Boolean	false
enableSelectColumn	是否开启隐藏列	Boolean	false
scroll	滚动条配置	Object	{x: true}
rowSelection	配置可选行	Object	null

注：上述之外属性若放到options中，最后会bind到a-table上

配置可选行:

rowSelection: {
    rowKey: string,
    fixed: boolean,
    columnWidth: number,
    selectedRowKeys: array,
    onChange: function(selectedRowKeys: array, selectedRows: array): any,
    getCheckboxProps: record => ({
      props: {
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      },
    })
},

DefOption

Property	Description	Type	Default Value
field	字段key	String\|slot	required
label	列title	String	--
labelParam	$t(label, labelParam)	Array	--
column	列描述数据对象	Object	{}
column.sorter	列排序规则	String\|Function	'string'
enumType	枚举对象	String	Object
filter	全局注册过的过滤器	String	--
child	折叠列配置对象	{defaultVisible: Boolean, // 是否默认展示 colDefs: Array}	null
children	表头分组配置	Array	null
colSpan	表头列合并	Number	null
rowSpan	行合并	Number	null

slot

Name	Description	SlotScope
title	自定义表头	{title, def}
footer	表格尾部	currentPageData
renderEmpty	无数据时展示	null

events

Name	Description	params
change	分页、排序、筛选变化时触发	Function(pagination, filters, sorter)
expand	点击展开图标时触发	Function(expanded, record)
expandedRowsChange	展开的行变化时触发	Function(expandedRowKeys)
export-current-page	导出本页数据	Function({header, data})