npm 包 i-table 使用教程

i-table 是一个基于 Vue.js 的表格组件,使用方便,可高度自定义。本文将介绍如何使用 i-table。

安装

通过 npm 安装 i-table。

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

引入

i-table 的使用需要先引入样式文件和组件。

样式文件

选择自己喜欢的主题,在样式文件中引入。

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

组件

在 Vue 组件中引入 i-table。

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

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

基本用法

基本表格

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

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

展开行

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

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

高级用法

隐藏表头

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

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

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

自定义列内容

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

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

总结

i-table 是一个非常好用的表格组件,能够快速搭建优秀的表格界面。在使用过程中,可以根据自己需求随意定制表格样式和功能。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60056bde81e8991b448e58c5


猜你喜欢

  • npm 包 @1backend/dobika-myservice-ng 使用教程

    简介 @1backend/dobika-myservice-ng 是一个基于 Angular 8 的 npm 包,专门用于访问 Dobika 后端服务。使用该包,你可以方便地获取 Dobika 后端服...

    3 年前
  • npm 包 gv-checkedlistbox 使用教程

    在前端开发中,我们经常需要使用列表和复选框控件来展示数据和获取用户选择,而 gv-checkedlistbox 就是一款非常好用的 npm 包,它可以方便地实现列表和复选框的组合控件。

    3 年前
  • npm 包 helix-matrix 使用教程

    helix-matrix 是一个 JavaScript 库,它用于创建和操作矩阵。它支持用于数值计算和绘图的各种转换,例如旋转、缩放和平移操作。它是 NPM 上的一个开源项目,由 helixsys 开...

    3 年前
  • npm包jason-scss使用教程

    前言 在前端开发中,CSS是不可或缺的重要一环,对于实现复杂的样式效果,我们可能需要使用各种工具库。jason-scss是一个非常好用的CSS库,可以极大的提升前端开发效率,本教程将为您介绍使用jas...

    3 年前
  • npm 包 react-style-comp 使用教程

    简介 React 是目前非常流行的前端框架之一,它提供了一种声明式的、高效的方式来构建 UI。然而,当我们需要写一些复杂的样式时,我们通常需要使用 CSS。为了更好地组织和复用 CSS,我们可以使用一...

    3 年前
  • npm 包 xiaomipush 使用教程

    小米推送,是一个集消息推送、消息统计、包管理为一体的应用推送平台。xiaomipush 是一个用于在前端中使用小米推送的 npm 包,它简化了小米推送的集成过程,只需要几行代码就可以集成小米推送。

    3 年前
  • npm 包 env-config-replace 使用教程

    简介 env-config-replace 是一个可以帮助前端项目配置文件根据环境变量自动切换的 npm 包。通过 env-config-replace,我们可以在开发、测试、生产等不同环境下使用不同...

    3 年前
  • 使用 generator-webpack-browser-lib 创建前端库的 NPM 包

    作为前端开发者,经常需要创建一些经常使用的库,以提高代码的可重用性,尤其是当你需要对多个项目或团队使用相同的代码时。现在,我们可以使用 generator-webpack-browser-lib 和 ...

    3 年前
  • npm 包 html-input-type-serialnumber 使用教程

    简介 html-input-type-serialnumber 是一款基于 HTML5 标准定制的输入框类型,它可以用来输入序列号或其他与数字相关的信息。这个 npm 包可以使得你能够快速地实现这种输...

    3 年前
  • npm 包 bucket-decorator 使用教程

    在前端开发中,经常会遇到一些需要限流的场景,如用户频繁操作导致服务器过载,或者一些需要限制访问频率的接口等。这时候,我们可以使用 bucket-decorator 这个 npm 包来进行限流。

    3 年前
  • npm 包 @aptoma/hapi-qs 使用教程

    如果你是一名前端开发人员,你一定已经听说过 npm。npm 是最流行的 Node.js 包管理器,它使得寻找、安装和更新 JavaScript 包变得轻松。而 @aptoma/hapi-qs 则是一款...

    3 年前
  • npm 包 gcamps-test-module 使用教程

    在前端开发过程中,我们总是需要使用各种不同的工具和辅助库来提高我们的开发效率和代码质量。其中,npm 是一个非常好用的 JavaScript 包管理工具,它可以让我们非常方便地安装、升级和管理前端项目...

    3 年前
  • npm包Homematic-virtual-lightifydevice使用教程

    简介 Homematic-virtual-lightifydevice是一个npm包,可以模拟虚拟的Osram Lightify智能灯泡设备,便于前端开发者在本地环境下开发Lightify相关的功能。

    3 年前
  • npm 包 jquery-local-cache 使用教程

    介绍 jquery-local-cache 是一个可以为 Web 应用程序添加本地缓存功能的 npm 包,它可以将数据存储在本地浏览器中,从而提升应用程序的性能和响应速度。

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

    在前端开发中,经常需要处理字符串相关的操作,例如对字符串进行格式化、分割、替换等等。而 node-str-util 是一个非常实用的 npm 包,它提供了一系列的字符串处理方法,可以轻松地完成各种字符...

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

    作为现今最火热的云端后端解决方案之一,Firebase已经成为了不少开发者的必备工具。其中,Firebase的用户认证系统一直是开发者使用Firebase的必须要掌握的内容。

    3 年前
  • npm 包 edan 使用教程

    什么是 npm 包 edan? edan 是一个基于 React 的 UI 库,用于快速创建美观的 Web 应用程序。它包含了许多常用的组件和样式,可以帮助团队快速完成前端开发任务。

    3 年前
  • npm 包 starspace 使用教程

    简介 npm 包 starspace 是一个用于实现对基于梦境模型的词向量空间嵌入学习的工具集。它提供了一种简单的方法来探索数据集中的潜在模式,并生成用于机器学习的特征。

    3 年前
  • npm 包 react-exiting 使用教程

    1. 简介 react-exiting 是一款 React 组件库,能够为用户提供交互式的退出动画效果。它可以帮助用户提高用户体验,提升页面的美观度,是开发人员在实际项目开发中常常使用到的工具。

    3 年前
  • npm 包 js3 使用教程

    在前端开发中,我们经常需要使用一些工具来优化代码,例如压缩、打包等操作。而 js3 就是一个非常好用的 npm 包,它可以帮助我们对 JavaScript 代码进行混淆、压缩和打包等操作,从而提高网站...

    3 年前

相关推荐

    暂无文章