2022 年 6 月 22 日星期三

作者 Allan Jardine

Vue3 组件

Vue.js 是一款前端 Javascript 框架，广泛用于创建响应式 Web 应用。它始终如一地是最受欢迎的框架之一，在这篇文章中，我将介绍 datatables.net-vue3 包，它提供 DataTables，用作 Vue3 应用中的组件。

想要直接使用示例代码？当然，毕竟这是一篇编码博客！以下示例展示了在 Stackblitz 上使用 Vue3 应用中的 DataTables，它允许我们运行基于 Node.js 的整个应用。示例使用了 Vue3 的 composition API 和 Vite 作为构建进程。

安装

首先使用下面命令安装 datatables.net-vue3 应用：

# npm
npm install --save datatables.net-vue3

# yarn
yarn add datatables.net-vue3

此包依赖于 datatables.net 和 jquery，它们会在自动捆绑中一起安装，因此如果您只想显示交互式表格，则无需任何其他包。

要在自己的组件中使用组件，请使用下面命令进行导入：

import DataTable from 'datatables.net-vue3';

这将向您提供一个 <DataTable> Vue 组件，以便您可以在模板中使用。

扩展

您还可以从其自己的 npm 包中安装 DataTables 扩展并以标准方式使用它们 - 例如对于 Select，您可能会使用

# npm
npm install --save datatables.net-select

# yarn
yarn add datatables.net-select

每个已添加的扩展都需要在 DataTable 组件中进行注册，这可以通过在组件上使用静态的 DataTable.use() 方法来完成 - 例如

import DataTable from 'datatables.net-vue3'
import Select from 'datatables.net-select';

DataTable.use(Select);

对所有其他 DataTables 扩展也适用。使用下载构建器获取您想要的扩展的 npm 包的列表（还包括样式包 - 参见下文）。

使用

在您的组件中安装并注册后，您将拥有可用的 <DataTable> 组件 - 它作为一个可选插槽，可用于描述具有页眉和页脚的表格

<DataTable class="display">
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
        </tr>
    </thead>
</DataTable>

重要提示：除非数据为静态的（即非响应的），否则不要使用 Vue for 语句用数据填充表格。这样做会导致 DataTables 和 Vue 都会尝试控制相同的 DOM 元素，从而导致不可预测的行为。请使用 data 参数绑定数据！

<DataTable> 组件具有以下可用的参数

columns - 定义用于 DataTables 初始化的列数列组
data - DataTables 的数据数列。这是可选参数，如果您使用 Ajax 加载 DataTable 数据，则不需要此参数。
ajax - DataTables 的 Ajax 选项 - 通过 Ajax 为表格加载数据。
class - 要指定给 table 标记的类名
options - 表格的 DataTables 选项。请注意，这里面可以包含 columns、data 和 ajax - 如果它们是由上面的某个属性提供，那么这里给出的匹配选项将被覆盖。

简单示例

Vue 应用程序（Composition API）中使用 DataTables 的最基本的示例是

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

const data = [
  [1, 2],
  [3, 4],
];
</script>

<template>
    <DataTable :data="data" class="display">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
            </tr>
        </thead>
    </DataTable>
</template>

你可以在 Stackblitz 上实际体验。

Ajax 数据示例

你可能希望通过 Ajax 而非使用本地 Vue 数据来加载要显示的表格数据。可以通过 ajax 参数实现，该参数指的是要从其加载数据的 URL

<DataTable
    :columns="columns"
    ajax="/data.json"
    class="display"
    width="100%"
/>

为简洁起见，我缩短了上面样例中的样板代码。此示例包含完整代码和运行示例，包括演示如何使用对象属性通过 columns.data 选项填充表格。

扩展示例

上面我展示了如何安装和注册 DataTables 扩展。一旦注册了这些扩展，就可以通过其初始化选项以标准的 DataTables 方式使用它们。在此示例中，我们使用 select 选项初始化 Select 扩展

<DataTable
    :columns="columns"
    :options="{select: true}"
    ajax="/data.json"
    class="display"
    width="100%"
/>

同样为简洁起见，我在这里缩短了代码，但此处可以查看完整的工作示例。

响应式数据

Vue 最令人兴奋且最有用的部分之一是响应式数据。简单来说，即更新数据（例如 variable = 1）后，UI 会自动更新以反映该更改 - 无论该更改多么复杂。datatables.net-vue3 软件包完全支持 Vue 的响应式数据，并且会自动反映对数据进行的更改。

为了演示这一点，请考虑以下内容

<button @click="add">Add new row</button><br />
<button @click="update">Update selected rows</button><br />
<button @click="remove">Delete selected rows</button>

<DataTable
    class="display"
    :columns="columns"
    :data="data"
    :options="{ select: true }"
    ref="table"
/>

你会看到我们有三个按钮，它们可以对绑定到 data 属性的 data 数组执行操作。对于 add()，我们的测试函数非常简单，如下所示

function add() {
  data.value.push( ... );
}

请注意，不必通过任何方法调用来告知 DataTables 新数据 - 它会自动更新。

DataTables API

更新和删除非常相似，因为我们只是操作数据数组，但我们需要访问 DataTables API 来了解最终用户选择了哪些行。DataTable 组件提供一个 dt 值，我们可以通过 Vue 引用获取该值

let dt;
const table = ref();

onMounted(function () {
  dt = table.value.dt;
});

现在，要删除一行，我们只需获取所选行的 data，使用 row().data()，在数组中找到此行并将其切片出来

function remove() {
  dt.rows({ selected: true }).every(function () {
    let idx = data.value.indexOf(this.data());
    data.value.splice(idx, 1);
  });
}

更新过程非常相似，并显示在完整的示例演示代码中。

需要注意的是，我们不会使用 DataTables API 方法来操作这里的数据 - 我们只是修改基础数据，它对那些更改做出反应。

样式

目前我们有一个可用的表格，但我们想让它看起来更漂亮，与页面上的其他组件保持一致。值得庆幸的是，DataTables 对各种样式库的支持在 Vue 应用程序中也一样易于使用。例如，考虑我们正在使用 Bootstrap 5 - 我们页面上的其余部分都是基于 Bootstrap 5 样式，而我们的 DataTable 也应该反映这一点。对于 DataTables 核心及其与 Bootstrap 5（和其他样式框架）配合使用的所有扩展，我们都有 npm 包 - 它们以 -bs5 结尾（例如 datatables.net-bs5 表示 Bootstrap 5 和 DataTables 核心）。默认样式带有 -dt 后缀。请参阅下载构建器以获取所需首选框架的样式包。

对于默认样式，只需安装样式包

# npm
npm install --save datatables.net-dt

# yarn
yarn add datatables.net-dt

然后将其包含在 <style> 标签中（请注意，我们在此处使用 Vite 构建包，它将同时解析来自 node 包的 CSS 样式和 Javascript，从而使此功能发挥作用）

<style>
@import 'datatables.net-dt';
</style>

对于其他样式框架，你还需要包含一个 Javascript 元素，该元素配置 DataTables 及其扩展以使用适合所选框架的样式和 DOM 结构 - 例如 Bootstrap 5

# npm
npm install --save datatables.net-bs5

# yarn
yarn add datatables.net-bs5

在 Vue 组件中，你可以用与使用扩展完全相同的方式注册该样式

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name' },
  { data: 'position' },
  { data: 'office' },
  { data: 'extn' },
  { data: 'start_date' },
  { data: 'salary' },
];
</script>

<style>
@import 'bootstrap';
@import 'datatables.net-bs5';
</style>

你可以在此处查看 Vue + DataTables + Bootstrap 5 的实际操作。

来源

适用于 Vue 的 DataTables 组件在 MIT 许可证下开源。源代码在 Github 上提供。

反馈

我们在 CloudTables 配置界面中广泛使用 Vue，此组件建立在此经验之上。但是，和往常一样，改进的空间总有！对于你可能有的任何建议和问题，或者你使用它的一个简短通知，请联系我们，以便我们可以将这些反馈反馈到我们自己的开发和文档工作中。此组件的下一个可能步骤是将其文档正式编入我们的手册中。敬请期待此功能及更多其他功能。