table-mixin

介绍

一款简单的列表数据处理 mixin。

安装

1. npm

npm i table-mixin

2. 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

列表重新布局