在前端开发中，数据表格的展示是非常常见的需求。此时，我们可以使用 vue-element-admin 等框架来快速构建一个数据表格的布局，但是对于表格中的一些复杂操作，我们通常需要写一些自定义的函数来实现，这时就需要一个能够方便地扩展表格功能的包。
element-table-wrapper 就是这样一个 npm 包，它基于 element-ui 的 el-table 组件，我们可以通过在其上加入一些类似 slot 的扩展点来方便地自定义表格。
安装
你可以使用 npm 或 yarn 来安装 element-table-wrapper：
npm install element-table-wrapper # 或者 yarn add element-table-wrapper
引入
在项目中引入 element-table-wrapper：
import ElementTableWrapper from "element-table-wrapper"; import "element-table-wrapper/dist/element-table-wrapper.css"; Vue.use(ElementTableWrapper);
使用
使用 element-table-wrapper 可以通过 slot 的形式来自定义表格的各个部分。
-- -------------------- ---- -------
----------------------
-----------------
------------------
------------------
-------------
-------------------
------
-
---- ---- ---
--------- --------------
--------------
-----------
---- ---- ---
--------- --------------
--------------
-----------
---- ---- ---
--------- --------------
---------- -------------- ----------------------------------------
-----------
---- --- ---------- ---
--------- ------------------ --------------------------- --- ---------
----------------------- - --------------
-----------
---- ------ ---
--------- -------------- ----------------------
----------- ------------- ----------------------- ----------------
-------- ------------ ---------
-------------
-----------
------------------------slot="header"
这个 slot 用来自定义表格顶部的部分，我们可以放置一些表头筛选搜索框或者一些自定义导出按钮。
slot="footer"
这个 slot 用来自定义表格底部的部分，可以放置一些分页器、一些自定义操作按钮等。
slot="bottom"
这个 slot 用来自定义表格下部的部分，可以放置一些自定义的表格操作按钮等。
slot-scope
这个 slot 用于自定义表格中的各列的属性，可以进行值的格式化、单元格的样式等操作。
columns slot
这个 slot 用于自定义表格的列内容，可以自定义一个表格的行高、行背景色等效果。
示例代码
下面是一个完整的使用范例：
-- -------------------- ---- -------
----------
-----
----------------------
-----------------
------------------
------------------
-------------
-------------------
------
-
---- ---- ---
--------- --------------
--------------
-----------
---- ---- ---
--------- --------------
--------------
-----------
---- ---- ---
--------- --------------
---------- -------------- ----------------------------------------
-----------
---- --- ---------- ---
--------- -------------- ----------------------
----------- ------------- ----------------------- ----------------
-------- ------------ ---------
-------------
-----------
------------------------
------
-----------
--------
--- ------- - --
------ ------- -
----- ------------
------ -
------ -
-------- ------
---------- -
-
--- --
----- ------
------ ----
---- --
--
-
--- --
----- ------
------ ----
---- --
--
-
--- --
----- ------
------ ----
---- --
--
-
--- --
----- ------
------ ----
---- -
-
--
-------- -
-
------ -----
----- --------
------ ------
--
-
------ -------
----- -------
------ -------
--
-
------ -----
----- --------
----- --------
------ -------
--
-
------ -----
----- ------
------ -------
--
-
------ -----
------ --------
------ --------
------ ---------
--------- - --- -- -
------ --
------------
-
--- -
------ -- -- -
-----------------
----------------
-
-
--
----
--
-
-
-
--
--
-------- -
-------------- -
---------------------
--- ----------
----- ------- - --------
------ -- - --------
---- - - -------
---
----------------------------------------------------------------- - ---
-
--
-------- -
------------ -
------ -- - - ------ - ----------------
-
-
--
---------总结
element-table-wrapper 提供了非常方便的自定义表格的功能，极大地减少了我们开发数据表格的时间和工作量。希望大家在项目中有更加高效的使用，以达到更好的工作效率和开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731581e8991b448e9448