i-table 是一个基于 Vue.js 的表格组件，使用方便，可高度自定义。本文将介绍如何使用 i-table。
安装
通过 npm 安装 i-table。
npm install i-table
引入
i-table 的使用需要先引入样式文件和组件。
样式文件
选择自己喜欢的主题，在样式文件中引入。
/* 引入主题 */ @import 'iview/dist/styles/iview.css'; @import 'i-table/dist/styles/i-table.css';
组件
在 Vue 组件中引入 i-table。
import iTable from 'i-table'; import 'i-table/dist/styles/i-table.css'; Vue.use(iTable);
基本用法
基本表格
-- -------------------- ---- -------
----------
-------- ------------------ -----------------------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
----- --------
--
-
------ -----
---- -------
--
-
------ -----
---- ------
--
-
------ -----
---- ----------
--
--
----- -
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
--
--
--
--
---------展开行
-- -------------------- ---- -------
----------
-------- ------------------ -------------
--------- ------------- --- ---
----
--- ---------------
-------- -------- ------
-------- ------- ------
-------- ----------- ------
-----
-----
-----------
----------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
----- ---------
------ ---
--
-
------ -----
---- -------
--
-
------ -----
---- ------
--
-
------ -----
---- ----------
--
--
----- -
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
--
--
--
--
---------高级用法
隐藏表头
-- -------------------- ---- -------
----------
-------- ------------------ -------------
--------- ------------- --- ---
----
------ -------- -------
------ ------- -------
------ ----------- -------
-----
-----------
----------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
------ -----
---- -------
------ ----
--
-
------ -----
---- ------
------ ----
--
-
------ -----
---- ----------
------ ----
--
--
----- -
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
--
--
--
--
---------
-------
----- ----- -
-------- -----
-
--------自定义列内容
-- -------------------- ---- -------
----------
-------- ------------------ -----------------------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
----- --------
--
-
------ -----
---- -------
--
-
------ -----
---- ------
--
-
------ -----
---- ----------
------- --- ------- -- -
------ --------- -
------ -
------ -------------- -- -- - ----- - --------
--
-- --------------------
--
--
--
----- -
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
-
----- -----
---- ---
-------- ------
--
--
--
--
--
---------总结
i-table 是一个非常好用的表格组件，能够快速搭建优秀的表格界面。在使用过程中，可以根据自己需求随意定制表格样式和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bde81e8991b448e58c5