1.0.7 • Published 1 year ago
table-mixin v1.0.7
table-mixin
介绍
一款简单的列表数据处理 mixin。
安装
- npm
npm i table-mixin- browser
<script src="https://unpkg.com/table-mixin/dist/index.umd.js"></script>data
| 参数 | 类型 | 是否必须 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|---|
| tableId | string | 是 | - | - | 列表唯一标识以及 ref |
| tableForm | object | 否 | - | {} | 列表查询条件 |
| tableSize | string | 否 | - | 列表尺寸 | |
| tableColumns | array | 否 | - | [] | 列表表头 columns[] |
| tableCheckedColumns | array | 否 | - | [] | 列表当前展示的列属性集合 prop[] |
| tableColumnsWidth | object | 否 | - | {} | 列表列宽 { prop: width } |
| tableSortProp | string | 否 | - | - | 列表排序的列属性 |
| tableSortOrder | string | 否 | - | - | 列表排序的方式 |
| tableLoading | boolean | 否 | - | false | 列表请求状态 |
| tablePageNum | number | 否 | - | 1 | 列表分页页码 |
| tablePageSize | number | 否 | - | 20 | 列表分页大小 |
| tableTotal | number | 否 | - | 0 | 列表条总数 |
| tableData | array | 否 | - | [] | 列表数据 |
| tableSelectedRows | array | 否 | - | [] | 列表当前选中数据 |
| tableCurrentRow | object | 否 | - | null | 列表当前行数据 |
| tableExcludeStorageProperties | array | 否 | - | [] | 列表排除本地存储数据字段 |
computed
| 参数 | 类型 | 说明 |
|---|---|---|
| tableVisibleColumns | array | 列表当前展示的列 cloumns[] |
methods
tableRemoteMethod
列表远程请求数据 API。
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| - | Promise | 是 | - |
tableBeforeRequestCallback
列表远程请求前的方法，一般用于请求参数校验。
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| fn | function | 否 | fn 为 tableRemoteMethod |
tableSuccessCallback
列表请求成功后的回调。
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| res | - | 否 | res 为 tableRemoteMethod 请求成功后返回的数据 |
tableErrorCallback
列表请求失败后的回调。
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| error | - | 否 | error 为 tableRemoteMethod 请求成功失败后的错误信息 |
refreshTable
刷新列表，该方法会将 tablePageNum 重置为 1 再进行刷新。
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| params | - | 否 | params 为需要重置的查询条件，如果没有则沿用上一次查询条件 |
getTableData
请求列表数据。该方法只刷新当前页。
setTablePageNum
设置分页页码。
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| pageNum | number | 是 | - |
setTablePageSize
设置分页大小。
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| pageSize | number | 是 | - |
setTableSize
设置表格尺寸
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| size | number | 是 | - |
setTableSelectedRows
处理表格选中状态改变
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| rows | array | 是 | - |
setTableCheckedColumns
设置列表表头展示
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| prop[] | array | 是 | - |
setTableColumnWidth
设置列表列宽
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| (newWidth, oldWidth, column) | - | 否 | - |
setTableSort
设置列表排序
| 参数 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| {prop, order} | - | 否 | - |
getTableStorage
从 LocalStorage 中获取列表信息。
setTableStorage
将列表信息存储至 LocalStorage。
setTableLayout
列表重新布局