简介
Good-Table 是一个基于 Vue.js 的表格插件，其提供了多种功能，例如：排序、分页、搜索、自定义模板等。Good-Table 还支持导入和导出 Excel，CSV 等表格数据格式。
安装
使用 npm 可以很方便地安装 Good-Table，执行以下命令即可：
npm install vue-good-table
引入
安装之后，在前端的 .js 或 .vue 文件中可以通过如下方式引入 Good-Table：
import VueGoodTablePlugin from 'vue-good-table'; import 'vue-good-table/dist/vue-good-table.css';
这里使用的是 ES6 的 import 语法，vue-good-table.css 为样式文件，应该被引入到全局的 css 文件中。
基本使用
安装和引入完成之后，我们可以在 Vue.js 中使用 Good-Table 了。例如创建一个简单的表格：
-- -------------------- ---- -------
----------
-----
---------------
------------------
--------------
------
-----------
--------
------ ------------ ---- -----------------
------ ------- -
----- --------------
----------- -
-------------
--
------ -
------ -
-------- -
-
------ -----
------ -------
--
-
------ -----
------ ------
--
--
----- -
- ----- ----- ---- -- --
- ----- ----- ---- -- --
--
--
--
--
---------上面代码中，我们指定了表格的列和行，列由 columns 定义，行由 rows 定义。
分页
Good-Table 内建了分页的功能，我们只需要添加 pagination 属性即可：
<vue-good-table
...
:pagination-options="{ enabled: true }"
...
/>使用这种方式启用分页功能后，每页默认显示 10 条数据，其他的选项也可以进行调整。
排序
Good-Table 支持列的排序功能，我们需要为列设置 sortable 属性：
-- -------------------- ---- -------
---------------
---
------------------
---
--
---
---- -- -
------ -
-------- -
-
------ -----
------ -------
--------- -----
--
---
--
--
-然后点击表头就可以实现数据按照该列排序。
搜索
Good-Table 支持对表格数据的搜索，可以通过设置表格的 search-options 属性来开启搜索功能：
<vue-good-table
...
:search-options="{ enabled: true }"
...
/>然后会自动在表格上方添加一个搜索框，输入相关内容可以进行对表格数据的过滤。
更多功能
除了上述的基本使用，Good-Table 还提供了很多其他的扩展功能：
- 多列排序
- 分页位置调整
- 列宽度调整
- 分页颜色样式调整
- 自定义模板
更详细的使用方法，可以参考官方文档。
总结
本文介绍了 Good-Table 应用的基本使用以及常见功能的实现方法，希望可以对前端开发者有所帮助。Good-Table 的更多功能还需进一步深入学习和实践，欢迎读者们前往官方文档学习和尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a681e8991b448dfe5d