i-table 是一个基于 Vue.js 的表格组件,使用方便,可高度自定义。本文将介绍如何使用 i-table。
安装
通过 npm 安装 i-table。
--- ------- -------
引入
i-table 的使用需要先引入样式文件和组件。
样式文件
选择自己喜欢的主题,在样式文件中引入。
-- ---- -- ------- ------------------------------ ------- ----------------------------------
组件
在 Vue 组件中引入 i-table。
------ ------ ---- ---------- ------ ---------------------------------- ----------------
基本用法
基本表格
---------- -------- ------------------ ----------------------- ----------- -------- ------ ------- - ------ - ------ - -------- - - ----- -------- -- - ------ ----- ---- ------- -- - ------ ----- ---- ------ -- - ------ ----- ---- ---------- -- -- ----- - - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- -- -- -- -- ---------
展开行
---------- -------- ------------------ ------------- --------- ------------- --- --- ---- --- --------------- -------- -------- ------ -------- ------- ------ -------- ----------- ------ ----- ----- ----------- ---------- ----------- -------- ------ ------- - ------ - ------ - -------- - - ----- --------- ------ --- -- - ------ ----- ---- ------- -- - ------ ----- ---- ------ -- - ------ ----- ---- ---------- -- -- ----- - - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- -- -- -- -- ---------
高级用法
隐藏表头
---------- -------- ------------------ ------------- --------- ------------- --- --- ---- ------ -------- ------- ------ ------- ------- ------ ----------- ------- ----- ----------- ---------- ----------- -------- ------ ------- - ------ - ------ - -------- - - ------ ----- ---- ------- ------ ---- -- - ------ ----- ---- ------ ------ ---- -- - ------ ----- ---- ---------- ------ ---- -- -- ----- - - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- -- -- -- -- --------- ------- ----- ----- - -------- ----- - --------
自定义列内容
---------- -------- ------------------ ----------------------- ----------- -------- ------ ------- - ------ - ------ - -------- - - ----- -------- -- - ------ ----- ---- ------- -- - ------ ----- ---- ------ -- - ------ ----- ---- ---------- ------- --- ------- -- - ------ --------- - ------ - ------ -------------- -- -- - ----- - -------- -- -- -------------------- -- -- -- ----- - - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- - ----- ----- ---- --- -------- ------ -- -- -- -- -- ---------
总结
i-table 是一个非常好用的表格组件,能够快速搭建优秀的表格界面。在使用过程中,可以根据自己需求随意定制表格样式和功能。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60056bde81e8991b448e58c5