简介
mk-app-list
是一款由麒麟子前端团队开发的 npm 包,用于在前端项目中快速创建列表页模板。
该包使用了 React 技术栈,可以快速生成一个带有分页、筛选、排序等常见功能的列表页,支持自定义样式和事件绑定。
安装
使用 npm 安装:
--- ------- ----------- ------
使用
基本使用
使用 mk-app-list
创建一个最简单的列表页,只需传入数据数组、表头配置以及分页配置即可:
------ ----- ---- -------- ------ ------- ---- -------------- ----- ------- - - - ------ ----- ---------- ---- -- - ------ ----- ---------- ------ -- - ------ ----- ---------- ----- -- -- ----- ---- - - - --- -- ----- ----- ---- -- -- - --- -- ----- ----- ---- -- -- - --- -- ----- ----- ---- -- -- -- ----- ---------- - - ------ ------------ --------- --- -- ------ ------- -------- -------- - ------ - -------- ----------------- ----------- ----------------------- -- -- -
在生成的列表页中,将会显示表头和数据内容,并且自动分页。
高级用法
支持筛选和排序
在表头配置中,为每个字段添加 filter
和 sorter
属性,即可启用筛选和排序功能:
----- ------- - - - ------ ----- ---------- ----- ------- ---- -- - ------ ----- ---------- ------- ------- ---- -- - ------ ----- ---------- ------ ------- ---- -- --
自定义样式
可通过传入 className
和 style
属性来自定义样式:
-------- ----------------- ----------- ----------------------- ------------------------ -------- ---------------- ------ -- --
绑定事件
可通过 onFilter
, onSort
, onPageChange
等属性来绑定事件处理函数:
-------- --------------------- - ----------------------- --------- - -------- -------------------- - ---------------------- -------- - -------- ---------------------------- -------- ------- - -------------------------- ------------ ----------------------- --------- ---------------------- -------- - -------- ----------------- ----------- ----------------------- ----------------------- --------------------- ------------------------------- --
总结
mk-app-list
可以快速生成一个功能齐全的列表页,大大提高了前端开发效率。其支持自定义样式、绑定事件处理等高级用法,方便灵活。在实际项目中,推荐使用该 npm 包快速创建列表页模板。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055d6281e8991b448db276