# table-mixin

**Repository Path**: lwj1426282929/table-mixin

## Basic Information

- **Project Name**: table-mixin
- **Description**: table表格基础数据&方法
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-21
- **Last Updated**: 2023-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# table-mixin

#### 介绍

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

#### 安装

1. npm

```bash
npm i table-mixin
```

2. browser

```js
<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

列表重新布局