0.4.2 • Published 3 years ago

mars-library v0.4.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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[]表格数据
loadingfalse表格 loading
total0总数
showPaginationtrue是否显示分页
pagination{ page: 1, pageSize: 20 }当前页数、每页条数
paginationConfig{ defaultPageSize: 20, showSizeChanger: true, showQuickJumper: true, showTotal: (total) => 共 ${total} 条, pageSizeOptions: '20', '40', '60', '80', '100' }Pagination
height-表格高度
stripetrue表格斑马纹
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[]表格数据
loadingfalse表格 loading
total0总数
showPaginationtrue是否显示分页
pagination{ page: 1, pageSize: 20 }当前页数、每页条数
paginationConfig{ defaultPageSize: 20, showSizeChanger: true, showQuickJumper: true, showTotal: (total) => 共 ${total} 条, pageSizeOptions: '20', '40', '60', '80', '100'Pagination
resizefalse自动设置高度
scroll{ scrollToFirstRowOnChange: true }横向/纵向滚动
rowSelection-选择功能的配置
rowClassName-行的类名(默认内置 table-striped)
childrenColumnName'children'指定树形结构的列名
indentSize15展示树形数据时,每层缩进的宽度,以 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{}控件布局
scrollToFirstErrortrue提交失败自动滚动到第一个错误字段
reversefalseok 和 cancel 按钮位置是否互换
showOktrue是否显示 ok 按钮
okText'确认'ok 按钮文本
showCanceltrue是否显示 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

属性默认值描述
clearSearchfalse清空搜索
resetSearchtrue重置搜索
showOnlytrue是否显示只看我的
onlyField'is_mine'自定义名称
onlyfalse只看我的

emits

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

slots

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

mars-modal 组件

props

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

属性默认值描述
visiblefalse是否显示
title-标题
width840宽度
zIndex10000zIndex

emits

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

mars-export 组件

props

属性默认值描述
columns[]导出自定义字段
labelCol6标签布局
wrapperCol12控件布局
title'导出数据'标题
width460宽度
zIndex10000zIndex

columns

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

emits

emits: ['export', 'cancel']
0.4.1

3 years ago

0.4.0

3 years ago

0.4.2

3 years ago

0.3.8-1

3 years ago

0.3.8-3

3 years ago

0.3.8-2

3 years ago

0.3.6

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago

0.3.5

4 years ago

0.3.0

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.4

4 years ago

0.3.3

4 years ago

0.2.9-9

4 years ago

0.2.9-8

4 years ago

0.2.9-7

4 years ago

0.2.9-6

4 years ago

0.2.8-9

4 years ago

0.2.8-8

4 years ago

0.2.9-5

4 years ago

0.2.9-4

4 years ago

0.2.9-3

4 years ago

0.2.9-2

4 years ago

0.2.9-1

4 years ago

0.2.9

4 years ago

0.2.8-10

4 years ago

0.2.8-11

4 years ago

0.2.8-7

4 years ago

0.2.8-6

4 years ago

0.2.8-5

4 years ago

0.2.8-4

4 years ago

0.2.8-3

4 years ago

0.2.8-2

4 years ago

0.2.7-6

4 years ago

0.2.8-1

4 years ago

0.2.8

4 years ago

0.2.7-5

4 years ago

0.2.7-4

4 years ago

0.2.7-3

4 years ago

0.2.7-2

4 years ago

0.2.7-1

4 years ago

0.2.7

4 years ago

0.2.6-6

4 years ago

0.2.6-5

4 years ago

0.2.6-4

4 years ago

0.2.6-3

4 years ago

0.2.6-2

4 years ago

0.2.6-1

4 years ago

0.2.5-1

4 years ago

0.2.6

4 years ago

0.2.4-5

4 years ago

0.2.4-4

4 years ago

0.2.4-3

4 years ago

0.2.4-2

4 years ago

0.2.4-1

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.2.3

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.2.2

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.4

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.2

4 years ago

0.1.3

4 years ago

0.1.0

4 years ago

0.0.3

4 years ago

0.1.1

4 years ago

0.0.2

4 years ago

0.0.8

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.1

4 years ago