@sinoui/use-rest-table
@sinoui/use-rest-table 旨在简化与@sinoui/data-table 的相关处理。
安装
使用yarn
:
yarn add @sinoui/use-rest-table
使用npm
:
npm i --save @sinoui/use-rest-table
快速使用
import React from 'react';
import useRestTable from '@sinoui/use-rest-table';
import DataTable, { TableColumn } from '@sinoui/data-table';
function ListDemo() {
const dataSource = useRestTable('/users', [], { keyName: 'userId' });
return (
<DataTable {...dataSource}>
<TableColumn name="userName" width={100} title="姓名" />
<TableColumn name="age" width={100} title="年龄" />
</DataTable>
);
}
dataSource 的属性和方法
@sinoui/use-rest-table
的dataSource
继承了use-rest-page-api 的所有属性和方法,除此之外还有以下方法:
-
data
表示列表数据 -
loading
表示数据加载中的状态 -
error
表示加载错误的状态 -
onSelect()
列表选中时的回调函数 -
selectedRows
表示列表的选中项 -
setSelectedItems()
设置列表选中项的回调函数 -
refresh()
重新加载数据列表数据 -
getItem()
从列表数据中获取其中一条数据信息(不与后端交互) -
create()
新增一条数据 -
onChange()
翻页、排序时的回调函数 -
sort
排序信息,类型为object
-
clean()
清空列表数据时的回调函数