mars-library v0.4.2
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 组件
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 组件
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 组件
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']4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago