npm 包 mk-app-list 使用教程

阅读时长 4 分钟读完

简介

mk-app-list 是一款由麒麟子前端团队开发的 npm 包,用于在前端项目中快速创建列表页模板。

该包使用了 React 技术栈,可以快速生成一个带有分页、筛选、排序等常见功能的列表页,支持自定义样式和事件绑定。

安装

使用 npm 安装:

使用

基本使用

使用 mk-app-list 创建一个最简单的列表页,只需传入数据数组、表头配置以及分页配置即可:

-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- --------------

----- ------- - -
  - ------ ----- ---------- ---- --
  - ------ ----- ---------- ------ --
  - ------ ----- ---------- ----- --
--

----- ---- - -
  - --- -- ----- ----- ---- -- --
  - --- -- ----- ----- ---- -- --
  - --- -- ----- ----- ---- -- --
--

----- ---------- - -
  ------ ------------
  --------- ---
--

------ ------- -------- -------- -
  ------ -
    -------- ----------------- ----------- ----------------------- --
  --
-

在生成的列表页中,将会显示表头和数据内容,并且自动分页。

高级用法

支持筛选和排序

在表头配置中,为每个字段添加 filtersorter 属性,即可启用筛选和排序功能:

自定义样式

可通过传入 classNamestyle 属性来自定义样式:

绑定事件

可通过 onFilter, onSort, onPageChange 等属性来绑定事件处理函数:

-- -------------------- ---- -------
-------- --------------------- -
  ----------------------- ---------
-

-------- -------------------- -
  ---------------------- --------
-

-------- ---------------------------- -------- ------- -
  -------------------------- ------------
  ----------------------- ---------
  ---------------------- --------
-

--------
  -----------------
  -----------
  -----------------------
  -----------------------
  ---------------------
  -------------------------------
--

总结

mk-app-list 可以快速生成一个功能齐全的列表页,大大提高了前端开发效率。其支持自定义样式、绑定事件处理等高级用法,方便灵活。在实际项目中,推荐使用该 npm 包快速创建列表页模板。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055d6281e8991b448db276

纠错
反馈