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']