安装与使用 vue-cuba-entity-list npm 包

什么是 vue-cuba-entity-list？

vue-cuba-entity-list 是一个基于 Vue.js 和 Cuba Platform REST API 开发的 npm 包，用于快速创建一个包含分页、排序和筛选功能的实体列表页面。

如何安装 vue-cuba-entity-list？

可以使用 npm 进行安装。

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

如何使用 vue-cuba-entity-list？

1. 导入 Vue 和 vue-cuba-entity-list

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

2. 注册 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

阅读全文

猜你喜欢

  • npm 包 vue-tabbar 使用教程

    简介 vue-tabbar 是一个用于构建底部 TabBar 的 Vue 组件库。该库简洁、易用，同时也支持一些自定义配置。 安装 使用 npm 进行安装： --- ------- ---------...

    3 年前
  • npm 包 abnfa 使用教程

    在前端开发的过程中，我们常常需要进行数据格验证，而这个过程就需要用到自动机。abnfa 是一款基于 ABNF 规范的自动机库，适用于数据格式验证、协议分析、编译等场合。

    3 年前
  • npm 包 angular-realtime-chat 使用教程

    前言 实时聊天是现代 Web 应用中非常常见的需求，而 Angular 作为前端开发中比较流行的框架之一，提供了许多开箱即用的解决方案。其中，angular-realtime-chat 是一个功能强大...

    3 年前
  • npm 包 node-disk 使用教程

    简介 node-disk 是一个基于 Node.js 的硬盘信息查询工具，可用于统计硬盘的基本信息、使用情况、目录信息等。 它可以返回硬盘的空间情况、文件系统、磁盘使用率和包含文件和目录的列表，支持 ...

    3 年前
  • npm 包 egg-emqtt 使用教程

    随着物联网技术的普及，MQTT (Message Queuing Telemetry Transport) 成为了一个非常流行的消息传递协议。而 egg-emqtt 则是一个基于 Egg.js 的 M...

    3 年前
  • npm 包 platzoniano 使用教程

    引言 在前端开发中，我们经常会用到各种 npm 包来实现特定的功能。在这篇文章中，我将介绍一个名为 platzoniano 的 npm 包，并对其使用进行详细讲解。

    3 年前
  • NPM 包 Gatsby Plugin Buildtime Timezone 使用教程

    简介 Gatsby Plugin Buildtime Timezone 是一个 Gatsby 插件，它可以根据时区自动处理页面中的时间。 在使用 Gatsby 开发静态博客的时候，我们通常需要在文章中...

    3 年前
  • npm 包 font-awesome-picker 使用教程

    在前端开发中，提供高质量的 UI 展示是至关重要的。在实现图标选择的时候，font-awesome-picker 是一个强大的选择。这个 npm 包提供了一些优秀的特性，比如说明和搜索。

    3 年前
  • npm 包 homebridge-smappee-platform 使用教程

    homebridge-smappee-platform 是一个用于家庭自动化的 npm 包，它可以将 smappee 能源监测设备与苹果 homekit 及 homebridge 桥接器链接起来，从而...

    3 年前
  • npm 包 npm-package-es6-boilerplate 使用教程

    npm 是 Node.js 的包管理工具，用于方便地下载和发布代码包。npm-package-es6-boilerplate 是一个基于 ES6 的 npm 包模板，可以用于快速构建需要打包的 Jav...

    3 年前
  • npm 包 @log4js-node/mailgun 使用教程

    简介 @log4js-node/mailgun 是一个基于 Node.js 平台的 npm 包，可用于发送邮件邮件。它可以帮助你在 Node.js 应用程序中很容易地集成邮件发送功能。

    3 年前
  • npm包adonis-asterisk-ami使用教程

    在前端开发中，经常会使用各种npm包来完成功能实现。在这篇文章中，我们将介绍npm包adonis-asterisk-ami的使用教程。adonis-asterisk-ami是一个用于连接Asteris...

    3 年前
  • npm 包 callbag-operate 使用教程

    npm 包 callbag-operate 是一个 JavaScript 函数库，旨在提供一个简单而有力的工具集，帮助开发者快速生成可组合的异步数据流。本文将介绍如何使用该包进行前端开发中的复杂数据流...

    3 年前
  • npm包：parse-command 使用教程

    在前端开发中，经常需要处理命令行参数。而 parse-command 是一个可以轻松解析命令行参数的 npm 包，它提供了简单易用的 API 和高度可定制化的选项。

    3 年前
  • npm 包 ucla-dining 使用教程

    前言 随着现代化的餐饮体验流程，餐饮便利性已经成为现代校园文化的重要组成部分。在加州大学洛杉矶分校，学生们需要通过多种途径获取相关的餐饮信息。现在，我们将介绍一种非常快捷方便的获取加州大学洛杉矶分校餐...

    3 年前
  • npm 包 karlsson-metal-a11y-checker 使用教程

    在前端开发中，无障碍性（Accessibility）是一个不容忽视的重要问题。karlsson-metal-a11y-checker 是一个优秀的 npm 包，可以用于检查网站的无障碍性，为用户提供包...

    3 年前
  • npm 包 ttk-edf-app-register 使用教程

    简介 npm 是 Node.js 的包管理器，它是全球最大的开源软件库之一，提供了各种各样的包，方便开发者进行快速开发。ttk-edf-app-register 是一个基于 React 和 Ant D...

    3 年前
  • npm 包 cfn-validator 使用教程

    AWS CloudFormation (CFN) 是 AWS 提供的一种基础设施即代码服务，让您可以编写模板来快速和可靠地配置和部署 AWS 资源。而 cfn-validator 是 npm 上开源的...

    3 年前
  • npm 包 vue-svg2-loader 使用教程

    在前端开发中，往往需要使用一些图标或矢量图来美化页面或按钮等元素。而 SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 语法的矢量图形格式，能够实现完美显示...

    3 年前
  • npm 包 @godban/test4 使用教程

    简介 @godban/test4 是一个基于 Node.js 平台开发的 npm 包，主要用于前端测试的实用工具库。它提供了一系列的测试工具和辅助函数，能够帮助前端工程师高效地进行单元测试、集成测试等...

    3 年前

相关推荐

    暂无文章