vue-table2 是一个基于 Vue.js 2.0 的强大的可自定义表格组件。它为用户提供了一些功能比较齐全的表格操作，例如分页、排序、过滤和编辑等。vue-table2 旨在简化开发过程，因此可以方便快速地创建美观的表格，并且可以轻松地进行定制以满足不同的需求。
安装
首先，需要在初始化项目的时候使用 npm 安装 vue-table2:
npm i vue-table2 --save
引入
在你的项目中，可以使用 import 语法引用 vue-table2 组件:
import Vue from 'vue';
import { VueTable2 } from 'vue-table2';
import 'vue-table2/dist/lib/table2.css';
Vue.use(VueTable2);基本用法
在模板文件中，添加以下代码:
<vue-table2 :data="tableData"></vue-table2>
那么，该表格的数据就需要存储在 tableData 变量中。接下来，我们需要在Vue实例中定义这个变量：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
---------- -
- ----- ------ ---- --- ---- ----------- -------- ---- ----------
- ----- -------- ---- --- ---- ------------ -------- ---- ----------
- ----- ------- ---- --- ---- ---------- -------- ---- ----------
--
--
--
--上面定义了一个数组，每个元素代表了一个对象，这些对象是我们表格中显示的数据。
现在，我们运行应用程序，就可以看到我们的表格已经可以正确显示了：
自定义表头
如果需要更改表格标题，可以为组件添加 tag 属性。例如，将标题更改为一个h3标签：
<vue-table2 tag="h3" :data="tableData"></vue-table2>
指定列
现在，我们的表格已经可以正确地显示数据，但我们可能需要自定义它的一些列。在这种情况下，你可以在表格中使用 vue-slot 来指定你需要的列。
例如，我们将表格改为只显示 "name" 和 "age" 列，代码如下：
<vue-table2 :data="tableData">
<template slot="columns">
<vue-table2-column name="name" title="Name"></vue-table2-column>
<vue-table2-column name="age" title="Age"></vue-table2-column>
</template>
</vue-table2>这样，我们仅仅把 "name" 和 "age" 列添加到了表格中。
排序
vue-table2 允许你通过点击表头按特定的列对表格进行排序。它会自动检测是否存在一个 sort 属性，如果存在则应用排序。
例如，让我们对我们的表格按照"age" 列进行升序排序：
<vue-table2 :data="tableData">
<template slot="columns">
<vue-table2-column name="name" title="Name"></vue-table2-column>
<vue-table2-column name="age" title="Age" sort></vue-table2-column>
<vue-table2-column name="job" title="Job"></vue-table2-column>
<vue-table2-column name="company" title="Company"></vue-table2-column>
</template>
</vue-table2>现在，我们的表格已经按 "age" 列进行了排序。
分页
如果我们的表格内容比较多，那么就需要将它切分成多个页面进行展示，这就是分页的作用。vue-table2 允许你通过添加 pagination 属性并将其设置为真值来启用分页。
例如，我们将我们的表格进行分页：
<vue-table2 :data="tableData" :pagination="true" :per-page="2">
<template slot="columns">
<vue-table2-column name="name" title="Name"></vue-table2-column>
<vue-table2-column name="age" title="Age" sort></vue-table2-column>
<vue-table2-column name="job" title="Job"></vue-table2-column>
<vue-table2-column name="company" title="Company"></vue-table2-column>
</template>
</vue-table2>这样，我们的表格就会按照每页两条数据进行分页展示。
过滤
除过排序和分页之外，vue-table2 还支持过滤。它可以在表格顶部添加一个文本输入来过滤结果。
例如，让我们添加一个按 "name" 进行过滤的输入框：
<vue-table2 :data="tableData" :pagination="true" :per-page="2" :filterable="true">
<template slot="columns">
<vue-table2-column name="name" title="Name"></vue-table2-column>
<vue-table2-column name="age" title="Age" sort></vue-table2-column>
<vue-table2-column name="job" title="Job"></vue-table2-column>
<vue-table2-column name="company" title="Company"></vue-table2-column>
</template>
</vue-table2>现在，我们的表格就会自动为我们提供一个输入框来按照 "name" 列进行过滤。
结尾
vue-table2 是一个非常好用的表格组件，如果你正在开发一个需要表格的项目，那么 strongly recommend 你使用它。希望本文章对有需要的读者能够有所启发，帮助你更好地理解和使用 vue-table2 组件。
示例代码
-- -------------------- ---- -------
----------
-----
----------- ----------------- ------------------ ------------- -------------------
--------- ---------------
------------------ ----------- ---------------------------------
------------------ ---------- ----------- -------------------------
------------------ ---------- --------------------------------
------------------ -------------- ------------------------------------
-----------
-------------
------
-----------
--------
------ --- ---- ------
------ - ---------- --------------- - ---- -------------
------ ---------------------------------
-------------------
------ ------- -
----- ------
----------- -
----------
----------------
--
------ -
------ -
---------- -
- ----- ------ ---- --- ---- ----------- -------- ---- ----------
- ----- -------- ---- --- ---- ------------ -------- ---- ----------
- ----- ------- ---- --- ---- ---------- -------- ---- ----------
--
--
--
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ba81e8991b448dffb0