mars-library

vue3 + vxe-table + antd-design-vue

Install and use

• yarn

yarn add mars-library

• use

import MarsLibrary form 'mars-library' app.use(MarsLibrary)

---

components

mars-gird 组件

vxe-table

vxe-table-plugin-antd

props

属性	默认值	描述
rowId	'id'	自定义行数据唯一主键的字段名
columns	[]	表格自定义列
data	[]	表格数据
loading	false	表格 loading
total	0	总数
showPagination	true	是否显示分页
pagination	{ page: 1, pageSize: 20 }	当前页数、每页条数
paginationConfig	{ defaultPageSize: 20, showSizeChanger: true, showQuickJumper: true, showTotal: (total) => 共 ${total} 条, pageSizeOptions: ['20', '40', '60', '80', '100'] }	Pagination
height	-	表格高度
stripe	true	表格斑马纹
seqConfig	-	序号配置
selectedValue	[]	勾选数据
radioConfig	{ highlight: true, checkMethod: () => true }	单选框配置
checkboxConfig	{ highlight: true, checkMethod: () => true })	复选框配置
mergeCells	-	合并单元格
editConfig	{ trigger: 'click', mode: 'cell', showStatus: true }	编辑配置
editRules	-	编辑规则
filterConfig	{ remote: true, filterMethod: () => true }	筛选配置
tooltipConfig	-	tooltip 配置
treeConfig	{ children: 'children' }	树形结构配置
scrollX	{ enabled: false }	横向虚拟滚动配置
scrollY	{ enabled: false }	纵向虚拟滚动配置
rowClassName	-	给行附加 className
cellClassName	-	给单元格附加 className
cellStyle	-	给单元格附加样式
rowStyle	-	给行附加样式
storageName	-	本地 Storage 名称

filterRender 配置

属性	可选值	描述
name	'AInput', 'AAutocomplete', 'AInputNumber', 'ASelect', 'ASwitch', 'ARate', 'MyDatePicker', 'MyRangePicker', 'MyCascader', 'MyInput', 'MySelect', 'MyTreeSelect'	支持的渲染组件
props	-	渲染组件附加属性
options	-	只对 name=ASelect 有效，下拉组件选项列表
optionProps	-	只对 name=ASelect 有效，下拉组件选项属性参数配置

editRender 配置

属性	可选值	描述
name	'AInput', 'AAutocomplete', 'AInputNumber', 'ASelect', 'ACascader', 'ADatePicker', 'AMonthPicker', 'ARangePicker', 'AWeekPicker', 'ATimePicker', 'ATreeSelect', 'ASwitch', 'ARate', 'AButton', 'AButtons'	支持的渲染组件
props	-	渲染组件附加属性
options	-	只对 name=ASelect 有效，下拉组件选项列表
optionProps	-	只对 name=ASelect 有效，下拉组件选项属性参数配置

emits

emits [
'search',
'update:pagination',
'page-change',
'update:selected-value',
'radio-change',
'checkbox-change',
'checkbox-all',
'cell-click',
'edit-closed',
'valid-error',
'filter-change',
'clear-filter',
'toggle-tree-expand'
]

slots

<slot name="searchBar"></slot>
<slot name="toolBar"></slot>

mars-table 组件

antd-design-vue

props

属性	默认值	描述
rowKey	'id'	表格行 key 的取值
columns	[]	表格自定义列
data	[]	表格数据
loading	false	表格 loading
total	0	总数
showPagination	true	是否显示分页
pagination	{ page: 1, pageSize: 20 }	当前页数、每页条数
paginationConfig	{ defaultPageSize: 20, showSizeChanger: true, showQuickJumper: true, showTotal: (total) => 共 ${total} 条, pageSizeOptions: ['20', '40', '60', '80', '100']	Pagination
resize	false	自动设置高度
scroll	{ scrollToFirstRowOnChange: true }	横向/纵向滚动
rowSelection	-	选择功能的配置
rowClassName	-	行的类名（默认内置 table-striped）
childrenColumnName	['children']	指定树形结构的列名
indentSize	15	展示树形数据时，每层缩进的宽度，以 px 为单位
size	'default'	表格大小
locale	{ filterConfirm: '筛选', filterReset: '重置', emptyText: '暂无数据' }	默认文案设置，目前包括排序、过滤、空数据文案

emits

emits: ['search', 'update:pagination', 'change']

slots

<slot name="searchBar"></slot>
<slot name="toolBar"></slot>

mars-form 组件

Form

props

属性	默认值	描述
columns	[]	表单自定义字段
layout	'inline'	表单布局
labelCol	{}	标签布局
wrapperCol	{}	控件布局
scrollToFirstError	true	提交失败自动滚动到第一个错误字段
reverse	false	ok 和 cancel 按钮位置是否互换
showOk	true	是否显示 ok 按钮
okText	'确认'	ok 按钮文本
showCancel	true	是否显示 cancel 按钮
cancelText	'取消'	cancel 按钮文本

columns

属性	可选值	描述
type	'AInput' 'AInputNumber' 'AAutoComplete' 'ASelect' 'ACheckboxGroup' 'ARadioGroup' 'ASwitch' 'ASlider' 'ADatePicker' 'ATreeSelect' 'ACascader' 'ADatePicker' 'AWeekPicker' 'AMonthPicker' 'ARangePicker' 'ATimePicker'	支持的渲染组件
title	-	字段文本
field	-	字段名称
rules	-	字段校验规则
props		渲染组件附加属性
event	-	渲染组件附加事件

emits

emits: ['ok', 'cancel', 'clear']

mars-search 组件

props

同 mars-form 组件一样，额外拓展了以下 props

属性	默认值	描述
clearSearch	false	清空搜索
resetSearch	true	重置搜索
showOnly	true	是否显示只看我的
onlyField	'is_mine'	自定义名称
only	false	只看我的

emits

emits: ['search', 'reset', 'clear']

slots

<slot name="extra"></slot> slot 中的内容默认向右对齐

mars-modal 组件

props

同 mars-form 组件一样，额外拓展了以下 props

属性	默认值	描述
visible	false	是否显示
title	-	标题
width	840	宽度
zIndex	10000	zIndex

emits

emits: ['update:visible', 'ok', 'cancel']

mars-export 组件

props

属性	默认值	描述
columns	[]	导出自定义字段
labelCol	6	标签布局
wrapperCol	12	控件布局
title	'导出数据'	标题
width	460	宽度
zIndex	10000	zIndex

columns

属性	可选值	描述
title	-	字段文本
field	-	字段名称
defaultValue	true	默认值
rules	-	字段校验规则

emits

emits: ['export', 'cancel']