在前端开发中，我们经常需要使用表格来展示数据。而在 Vue.js 中，一个叫做 vue-good-table-ngi 的 npm 包可以帮助我们快速开发具有强大功能的表格。本文会详细介绍如何使用 vue-good-table-ngi 包，并包含示例代码，帮助大家更好地理解这个 npm 包。
安装与引入
首先，在你的 Vue.js 项目中安装 vue-good-table-ngi：
npm install --save vue-good-table-ngi
接着，在你的 Vue.js 组件中引入 vue-good-table-ngi：
-- -------------------- ---- -------
------ ------------ ---- ---------------------
------ ---------------------------------------------
------ ------- -
----------- -
----------------- -------------
--
-基础用法
下面我们来看一个基础示例：
-- -------------------- ---- -------
----------
--------------- ------------------ ------------------------------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
------ -------
------ -------
--
-
------ ------
------ ------
----- ---------
--
--
----- -
-
----- ----- -----
---- ---
--
-
----- ----- -------
---- ---
--
--
--
--
-
---------这个示例中，我们创建了一个表格，其中包含两列：姓名和年龄。我们同时提供了表格每一行的数据，这里只有两行 John Doe 和 Jane Smith。
使用这个 npm 包，我们可以自定义列的样式，使用不同的过滤器等等。下面的代码展示了如何对列进行自定义：
-- -------------------- ---- -------
-------- -
-
------ -------
------ -------
----------- ----- -- ----
----- ------- -- ----------
--
-
------ ------
------ ------
----- ---------
--------- ----- -- ----
--
-
------ -------
------ -------
----- -------
--------- -----
---------- ----- -- --------------------------- -- -----
--
--我们可以在上述代码中看到，我们定义了三个不同的列：姓名、年龄和日期。对于姓名和日期两个字段，我们使用了不同的过滤器。而在日期这一列中，我们使用了自定义的格式化函数进行数据的格式化。同时，我们还可以支持对这三列进行搜索和排序。
指令的使用
vue-good-table-ngi 中提供了许多指令，使得我们可以更好地控制表格的行、列或单元格。下面我们来看一个具体的列指令示例：
columns: [
{
label: 'Name',
field: 'name',
headerClass: 'bg-dark text-white', // 自定义列头部样式
template: '<strong>{{ value }}</strong>', // 自定义列内部数据呈现方式
},
]在这个示例中，我们针对“姓名”这一列进行了自定义。我们首先使用了 headerClass 指令来自定义该列的表头样式。此外，我们也使用了 template 指令来指定了该列内部数据的呈现方式。这里我们使用 HTML 模板，并将“姓名”加粗。
进阶用法
vue-good-table-ngi 还提供了许多高级用法，例如支持分页、自定义单元格动作、自定义单元格渲染等等。考虑一个更复杂的例子，假设我们有一个表格展示用户信息，我们想要让点击一行时，弹出该用户具体信息的弹窗。 下面是实现这个需求的示例：
-- -------------------- ---- -------
----------
--------------- ------------------ ------------ ------------------------------------------------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
------ -------
------ -------
----------- -----
--
-
------ ------
------ ------
----- ---------
--------- -----
--
-
------ ---
------ ---
------ -------
---------- ----- ------- ---------- -- -
------ --- ---------- --------------- ------------------- --------------------------------- --------------------------------
--
--
--
----- -
-
----- ----- -----
---- ---
--
-
----- ----- -------
---- ---
--
--
-------------- -
-------- -----
--------------------- -----
------------------- ---------------
-------------- -------- ----------
------------------- --------
--
--
--
-------- -
---------------- -
-----------------
--
--
-
---------在这个例子中，我们定义了三列。第一列展示用户姓名，第二列展示用户年龄，第三列通过 formatter 指令覆盖了默认的数据呈现方式，自定义了一个图标。此外，我们还使用了 selectOptions 指令来使表格行可选，以方便我们后续弹出弹窗展示具体信息。
在 formatter 指令的自定义代码中，我们通过 Bootstrap 4 的内置 modal 组件，在点击图标时弹出了一个弹窗，展示用户具体信息。需要注意的是，我们在 i 标签中使用了 @click=“handleClick(row)”，通过这个方法将点击的行信息输出到控制台，以作为下一步实现弹窗功能的基础。
总结
本文介绍了如何使用 vue-good-table-ngi，提供了基础示例、指令使用和进阶用法，并包含了详细的代码解读。在实际开发中，我们可以根据自己的需求，灵活使用 vue-good-table-ngi 中的各种组件和指令，快速开发出符合需求的表格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc47c