什么是 vue-cuba-entity-list？
vue-cuba-entity-list 是一个基于 Vue.js 和 Cuba Platform REST API 开发的 npm 包，用于快速创建一个包含分页、排序和筛选功能的实体列表页面。
如何安装 vue-cuba-entity-list？
可以使用 npm 进行安装。
npm install vue-cuba-entity-list
如何使用 vue-cuba-entity-list？
1. 导入 Vue 和 vue-cuba-entity-list
import Vue from "vue"; import CubaEntityList from "vue-cuba-entity-list";
2. 注册 CubaEntityList 组件
Vue.component("CubaEntityList", CubaEntityList);3. 在模板中使用 CubaEntityList 组件
-- -------------------- ---- -------
----------
---------------
------------------------
------------------
------------------
--------------------------
--
-----------
--------
------ ------- -
----- -------------
------ -
------ -
----------- ------------
-------- -
- ------ --------- ------ ------ -- --
- ------ --------- ------ ------ -- --
- ------ --------- ------ ------ -- -
--
-------- -
- ------ --------- ------ ------ --- ----- ------ --
- ------ --------- ------ ------ --- ----- --------- -------- -------- --- ------- --- --
- ------ --------- ------ ------ --- ----- ------ -
-
--
--
-------- -
------------------- -
-- -- ---- -------- ---- --- ----
----- -------- - -------------------------------- --------
-- ------
----- ---- - --------------
-- ---------
------ - ----- ------------ ------ --------------- --
-
-
--
---------4. 可选配置 props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| entityName | String | - | 实体名称 |
| columns | Array | - | 列表字段 |
| filters | Array | - | 过滤器 |
| perPage | Number | 15 | 每页条数 |
| serverSort | Boolean | false | 是否在服务端排序 |
| serverFilter | Boolean | false | 是否在服务端筛选 |
| hideFilters | Boolean | false | 是否隐藏过滤器 |
| hideSort | Boolean | false | 是否隐藏排序 |
| hidePager | Boolean | false | 是否隐藏翻页操作 |
| sortKey | String | - | 默认排序字段 |
| sortDir | String | asc | 默认排序方向（asc 或 desc） |
| filterKey | Object | - | 默认筛选字段 |
| filtersValue | Object | - | 预设筛选值，key 为字段名，value 为筛选的值。 |
| params | Object | - | 用户自定义的参数 |
| onFetchData | Function | - | 获取列表数据的回调函数 |
| onDataLoaded | Function | - | 列表数据加载完成后的回调函数 |
| onRowClick | Function(1) | - | 点击列表行的回调函数（只有一个参数：行数据） |
示例代码
-- -------------------- ---- -------
----------
---------------
------------------------
------------------
------------------
------------------
------------------------
----------------------------
--------------------------
--------------------
----------------------
------------------
------------------
----------------------
----------------------------
----------------
--------------------------
----------------------------
------------------------
--
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----- -------------
----------- -
--------------
--
------ -
------ -
----------- ------------
-------- -
- ------ --------- ------ ------ -- --
- ------ --------- ------ ------ -- --
- ------ --------- ------ ------ -- -
--
-------- -
- ------ --------- ------ ------ --- ----- ------ --
- ------ --------- ------ ------ --- ----- --------- -------- -------- --- ------- --- --
- ------ --------- ------ ------ --- ----- ------ -
--
-------- ---
----------- -----
------------- -----
------------ ------
--------- ------
---------- ------
-------- ---------
-------- ------
---------- - ------- --------- ------- -------- --
------------- - ------- --------- ------- -------- --
------- - ------- --------- ------- -------- -
--
--
-------- -
------------------- -
-- -- ---- -------- ---- --- ----
----- -------- - -------------------------------- --------
-- ------
----- ---- - --------------
-- ---------
------ - ----- ------------ ------ --------------- --
--
-------------- -
-------------------------
--
--------------- -
---------------------- -----
-
-
--
---------总结
vue-cuba-entity-list 是一个方便开发者快速创建实体列表页面的 npm 包，使用简单，提供了丰富的配置项，可以满足大多数实体列表页面的需求。在使用时，还需结合 Cuba Platform REST API 进行数据的获取和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057cb081e8991b448ebfa9