前言
在前端开发过程中，常常需要使用到表格来展示数据，常常使用 UI 框架的表格组件进行开发。但是对于某些需求来说，UI 框架的表格组件的样式和功能不能满足要求，这时就需要自己开发或使用第三方的表格组件。本文介绍的 npm 包 ice-vue-basic-table-block 是一个基础表格组件，适用于中小型的表格数据展示。
一、安装
你可以通过 npm 来安装：
npm install ice-vue-basic-table-block --save
二、使用
1. 引入组件
在需要使用的页面 import 组件：
import IceVueBasicTableBlock from 'ice-vue-basic-table-block'
2. 使用组件
在页面中使用 IceVueBasicTableBlock 组件：
-- -------------------- ---- -------
----------
----------------------
------------------
-------------
------------------------
-----------
--------
------ --------------------- ---- ---------------------------
------ ------- -
----- ---------
----------- -
---------------------
--
------ -
------ -
-------- -
-
------ -----
---- ------
--
-
------ -----
---- -----
--
-
------ -----
---- --------
-
--
----- -
-
----- -----
---- ---
------- ---
--
-
----- -----
---- ---
------- ---
--
-
----- -----
---- ---
------- ---
-
-
-
-
-
---------注：columns 属性是表格列的配置信息，data 属性是表格中的数据信息。在上面的例子中，表格中有三列，分别是姓名、年龄、性别，有三条数据记录。
三、API
IceVueBasicTableBlock 组件提供了一些属性和事件，如下表所示：
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 表格列的配置信息 | Array | [] |
| data | 表格中的数据信息 | Array | [] |
| stripe | 是否为斑马纹表格 | Boolean | true |
| highlight | 是否开启鼠标移入高亮 | Boolean | true |
| border | 是否展示边框 | Boolean | true |
| empty-text | 表格无数据时显示的文本 | String | 暂无数据 |
| page-change | 分页发生变化时触发该事件，可用于分页时异步获取数据 | Func | - |
四、总结
通过以上的步骤，我们就可以快速地使用 ice-vue-basic-table-block 组件展示表格数据了。这个组件具备良好的可定制性和扩展性，且轻量易用，是 Vue 开发中一个不错的选择。
示例代码
完整的示例代码可以在 GitHub 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005a09c81e8991b448ed504