随着前端技术的不断发展，我们的项目中可能需要用到各式各样的表格。但是默认的表格样式可能不够美观或者不满足我们的要求，此时我们可以借助一些优秀的第三方库来解决问题。其中一个非常实用的 npm 包就是 borderless-table。
简介
borderless-table 是一个表格组件，为表格增加了可调整列宽，无边框，带有 hover 效果的样式，同时支持响应式。这个组件非常易于使用与定制化。
安装
使用 npm 安装 borderless-table：
npm install borderless-table --save
使用方法
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ----- ---------------
---- -- --- -- ---
----- ---------------- -----------------------------------------------------------------
-------
------
---- -------------------------
---- -- ------------------- -- ---
------- ------------------------------------------------------------------------
--------
-- ----
--- ---- - -
- ----- ------- ---- --- ------ ------------------- ------- ------ --
- ----- ------- ---- --- ------ ------------------- ------- -------- --
- ----- ------ ---- --- ------ ------------------ ------- ------ --
- ----- ------- ---- --- ------ ------------------- ------- -------- -
--
-- ------
--- ------- - -
- ------ ------- ------ ------- --------- ---- --
- ------ ------ ------ ------ --------- ---- --
- ------ -------- ------ -------- --------- ---- --
- ------ --------- ------ --------- --------- ---- -
--
-- --------
--- ----- - ---------------------------------------- -
----- -----
-------- -------
---
---------
-------
-------参数配置
borderless-table 的参数十分丰富，可用于定制化样式、数据源等，下面针对常用参数进行详细说明：
data: 表格数据源，格式为 JSON 数组。columns: 表头数组。title: 列标题名称。field: 列数据源的键名称。sortable: 是否可排序，默认为 false。
tableClass: 表格的额外 class 名称，可用于自定义表格样式。responsive: 是否启用响应式，默认为 true，当窗口大小改变时表格会自适应。scrollX: 横向滚动条，默认为 false。pageSize: 每页显示的行数，默认为 20。enablePager: 是否启用分页器，默认为 true。enableColumnResize: 是否启用列宽度调整，默认为 true。enableSelection: 是否启用行选择，默认为 false。highlightSelectedRow: 是否高亮选中行，默认为 false。
示例代码
下面我们介绍一个使用 borderless-table 的示例代码，它展示了如何使用分页器、行选择、高亮选中行等功能。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ---------------
---- -- --- -- ---
----- ---------------- -----------------------------------------------------------------
-------
------
-------------------- ------------
---- ---- ---
---- -------------------------
---- -- ------------------- -- ---
------- ------------------------------------------------------------------------
---- ------- -- --- ---
--------
--- ---- - ---
--- ---- - - -- - -- --- ---- -
-----------
--- --
----- ----- - - --
---- ------------------------ - --- - --- -- --- ----- --
------ ------ - - - ---------------
------- - - - --- - - --- - --- -- -----------
---
-
---------
---- --------------------------- ---
--------
--- ------- - -
- ------ ----- ------ ----- --------- ---- --
- ------ ------- ------ ------- --------- ---- --
- ------ ------ ------ ------ --------- ---- --
- ------ -------- ------ -------- --------- ---- --
- ------ --------- ------ --------- --------- ---- -
--
--- ----- - ---------------------------------------- -
----- -----
-------- --------
----------- -------------
----------- -----
-------- -----
--------- ---
------------ -----
------------------- -----
---------------- -----
--------------------- ----
---
-- ------
------------------------ -------------- -
--------------------- ------- ------
---
---------
-------
-------结论
borderless-table 是一个极其实用的表格组件，适用于各类项目中的表格需求，它拥有良好的响应式特性、可定制的样式以及丰富的配置项，而且使用简单便捷，降低了前端开发的难度和成本。我们可以将其作为项目中的表格解决方案，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c84ccdc64669dde4e5c