简介
mk-app-list 是一款由麒麟子前端团队开发的 npm 包，用于在前端项目中快速创建列表页模板。
该包使用了 React 技术栈，可以快速生成一个带有分页、筛选、排序等常见功能的列表页，支持自定义样式和事件绑定。
安装
使用 npm 安装：
npm install mk-app-list --save
使用
基本使用
使用 mk-app-list 创建一个最简单的列表页，只需传入数据数组、表头配置以及分页配置即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- --------------
----- ------- - -
- ------ ----- ---------- ---- --
- ------ ----- ---------- ------ --
- ------ ----- ---------- ----- --
--
----- ---- - -
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
--
----- ---------- - -
------ ------------
--------- ---
--
------ ------- -------- -------- -
------ -
-------- ----------------- ----------- ----------------------- --
--
-在生成的列表页中，将会显示表头和数据内容，并且自动分页。
高级用法
支持筛选和排序
在表头配置中，为每个字段添加 filter 和 sorter 属性，即可启用筛选和排序功能：
const columns = [
{ title: 'ID', dataIndex: 'id', sorter: true },
{ title: '姓名', dataIndex: 'name', filter: true },
{ title: '年龄', dataIndex: 'age', sorter: true },
];自定义样式
可通过传入 className 和 style 属性来自定义样式：
<AppList
columns={columns}
data={data}
pagination={pagination}
className="custom-class"
style={{ backgroundColor: 'pink' }}
/>绑定事件
可通过 onFilter, onSort, onPageChange 等属性来绑定事件处理函数：
-- -------------------- ---- ------- -------- --------------------- - ----------------------- --------- - -------- -------------------- - ---------------------- -------- - -------- ---------------------------- -------- ------- - -------------------------- ------------ ----------------------- --------- ---------------------- -------- - -------- ----------------- ----------- ----------------------- ----------------------- --------------------- ------------------------------- --
总结
mk-app-list 可以快速生成一个功能齐全的列表页，大大提高了前端开发效率。其支持自定义样式、绑定事件处理等高级用法，方便灵活。在实际项目中，推荐使用该 npm 包快速创建列表页模板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6281e8991b448db276