简介
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