简介
mk-app-delivery-order-list 是一个基于 React 框架的前端组件库，用于展示物流分销商的订单列表。它可以高度定制，包括实现数据过滤、排序和分页等功能。这个组件库通过 npm 包发布，并且易于安装和使用。
安装
首先需要在项目的根目录下执行以下命令：
npm install mk-app-delivery-order-list --save
安装完成后，在项目中引入组件：
import OrderList from 'mk-app-delivery-order-list';
API 说明
OrderList
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| filter | 数据过滤 | object | null |
| sort | 排序方式 | object | null |
| pagination | 分页参数 | object | null |
| columns | 列定义 | array | [] |
| dataSource | 数据源 | array | [] |
| onFetch | 数据或者分页信息变化时回调 | func | null |
| className | 组件样式名 | string | "" |
| style | 组件样式 | object | {} |
| useFixedHeader | 是否使用固定表头 | bool | false |
| rowSelection | 复选框 | object | null |
| locale | 汉化 | object | {} |
OrderList.Column
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 列标题 | string | "" |
| dataIndex | 列数据源 | string | "" |
| key | 列键 | string | "" |
| width | 列宽度 | number | 100 |
OrderList.Selection
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onSelectAll | 全选或取消全选 | func | |
| onSelect | 选中或取消选中 | func | |
| selectedRowKeys | 选中行的 id 组成的数组 | array | [] |
使用
基础用法
以下为一个简单的展示订单列表的例子：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ --------- ---- ----------------------------- ----- --- ------- --------- - -------- - ----- ---------- - - - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- -- ----- ------- - - - ------ ------ ---------- ----- ---- ----- -- - ------ ------- ---------- ------- ---- ------- -- - ------ ----- ---------- --------- ---- --------- -- - ------ ------- ---------- ------------- ---- ------------- -- -- ------ - ---------- ----------------------- ----------------- -- -- - -展开代码
分页
可以通过设置 pagination 属性实现分页功能：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ --------- ---- ----------------------------- ----- --- ------- --------- - -------- - ----- ---------- - - - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- -- ----- ------- - - - ------ ------ ---------- ----- ---- ----- -- - ------ ------- ---------- ------- ---- ------- -- - ------ ----- ---------- --------- ---- --------- -- - ------ ------- ---------- ------------- ---- ------------- -- -- ----- ---------- - - --------- -- ------ ------------------ --------- ------ --------- -- - -------------------- ------ ----- ----- ------ ---------- -- -- ------ - ---------- ----------------------- ----------------- ----------------------- -- -- - -展开代码
排序和过滤
可以通过设置 filter 和 sort 属性实现数据的排序和过滤功能：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ --------- ---- ----------------------------- ----- --- ------- --------- - -------- - ----- ---------- - - - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- - --- -- ----- ------ ------- ---- ----------- ------------ -- -- ----- ------- - - - ------ ------ ---------- ----- ---- ----- -- - ------ ------- ---------- ------- ---- ------- -- - ------ ----- ---------- --------- ---- --------- -- - ------ ------- ---------- ------------- ---- ------------- -- -- ----- ------ - - ---- ------- ------ ----- -- ----- ---- - - ---- ------------- ----- ------- -- ------ - ---------- ----------------------- ----------------- --------------- ----------- -- -- - -展开代码
总结
mk-app-delivery-order-list 是一个非常实用的订单列表组件库，可以为开发者提供丰富的功能和高度自定义能力。在实际开发过程中，我们可以灵活应用这个组件库，并根据具体业务场景予以定制化。通过这篇文章的介绍，相信读者们已经对这个组件库的使用有了更深入的了解，并且可以在自己的项目中灵活使用它，提高项目开发的效率。如果您有任何疑问或者建议，欢迎与我们联系，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600565f481e8991b448e1e5a
