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

列表重新布局