在前端开发中，表格是一个不可或缺的组件。而 vue.js 是目前很多项目中使用的前端框架，针对 vue.js 的表格组件也存在很多。其中，我们推荐使用 npm 包 yaynab-vue-tables-2。
安装
使用以下命令安装：
npm install yaynab-vue-tables-2
注意：该包依赖于 vue.js，需要先安装 vue.js。
基本使用
- 导入组件
import { ServerTable, ClientTable } from 'yaynab-vue-tables-2';- 使用组件
html 模板中使用
<template>
<server-table url="/some/url">
<table class="table table-bordered table-hover table-striped dataTable no-footer"></table>
</server-table>
</template>JavaScript 中使用
// Server Table
Vue.component('server-table', ServerTable);
const vm = new Vue({
el: '#app'
});- 配置
可以通过 yaynab-vue-tables-2 的配置项修改组件的表现。
-- -------------------- ---- -------
----- ------- - -
-- ------ -- ---
-------- ---
-- --------
----------- -
------- -----
-------- ---
--------- ---- --- ---
--
-- ---
------- ---
-- -------------
--------- ----
-
----- ------- - -
-
------ -----
------ ----
--
-
------ ------
------ ----------
--
-
------ --------
------ -------
-
--
----- ---- - -
---- ---------
-------- --------
-------- --------
-高阶使用
自定义列（slot）
如果想要自定义列的显示方式，可以使用 slot 来自定义。
<server-table url="/users">
<table class="table table-bordered table-hover table-striped dataTable no-footer">
<template slot="age" slot-scope="{row}">
{{ calculateAge(row.birthday) }}
</template>
</table>
</server-table>在这个例子里，我们自定义了一个 age 的列，用来显示用户的年龄，calculateAge 是一个自定义的计算年龄函数。
深度定制（Mixin）
如果想要更深度的定制 yaynab-vue-tables-2 的表现，你可以直接在你当前的 vue 组件中使用 mixin。
-- -------------------- ---- -------
----------
-------------
------------
------------------
------------------
------------------
------------------
-
------ ------------ -------------- ----------- ------------- --------- -----------
---- --- - ----------- ---
--------- -------- -------------------
-- --------------- - ---------- -------- ------
-----------
--------
---------------
-----------
--------
------ - ------------ --- - ---- ----------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
-------- ------
-------- ------
-------- - --- -
--
--
------- -
------------- ----------- ---------- -----------
--
-------- -
------------ -
--------------------
-
-
--
---------示例代码
以下是一个简单的用户管理页面的示例代码，其中使用了 yaynab-vue-tables-2 来展示用户列表。
-- -------------------- ---- -------
----------
-----
-------------
------------------
------------------
------------
-
------ ------------ -------------- ----------- ------------- --------- -----------
--------- ---------- -------------------
-- -------------------------- --
-----------
--------- ----------- -------------------
-------
---------- ----------- -------
-------------------------
-
--
---------
-----------
--------- ------------- -------------------
-------
---------- ---------- -------
---------------------------
-
--
---------
-----------
--------
---------------
------
-----------
--------
------ - ------------ --- - ---- ---------------------
------ ------- -
----- -----------
----------- -
-----------
--
---- -- -
------ -
-------- -
-------- ---
----------- -
------- -----
-------- ---
--------- ---- --- ---
--
------- ---
--------- ----
--
-------- -
-
------ -----
------ -----
----------- ----
--
-
------ ------
------ ----------
--
-
------ -----
------ ------
----- ------
----------- ----
--
-
------ --------
------ -------
--
-
------ -----
------ ---
----- ---------
-
-
-
--
--------- -
------- -- -
------ -
--------- -
------ ------
----- -------
------ --
--
---- -
------ -----
----- --------
--
------ -
------ --------
----- -------
------ --
-
-
-
--
------- -
------------- ----------- ---------- -----------
--
-------- -
------------ ---------- -
-- ------
--
-------- ---- -
-- ------
--
---------- ---- -
-- ------
-
-
-
---------总结一下，yaynab-vue-tables-2 是一个强大的 vue.js 表格组件，提供了丰富的配置和高阶使用方式，可以方便地实现各种需求。在使用时需要注意配置项的细节，同时可以参考示例代码来学习如何使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005575381e8991b448d44cf