DataTables
为您的表格提供高级交互
功能。
Editor
综合编辑
DataTables 库。
手册
下载
≡ 显示网站导航

Vue

Vue.js 是一种前端 Javascript 框架，广泛用于创建响应式 Web 应用程序。我们发布 datatables.net-vue3 包，该包提供 DataTables，可在 Vue3 应用程序中用作组件。

安装和导入

使用您的包管理器安装 datatables.net-vue3 和 datatables.net-dt 包

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

# yarn
yarn add datatables.net-vue3 datatables.net-dt

然后，要在您自己的组件中使用 DataTables 组件，您需要 import 该组件和 DataTables 内核，然后指定 DataTables 内核作为组件中要使用的库，如下所示

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-dt';

DataTable.use(DataTablesCore);

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

样式

导入 datatables.net-dt 包似乎是多余的一个步骤——为什么我们不只是依赖于该包？DataTables 支持多种不同的样式框架（Bootstrap、Bulma、Foundation 等），每个框架都发布为不同的包，因此我们在这里所做的是导入 DataTables 默认样式包，然后将其指定为 Vue 组件要使用的库。

如果您想使用 DataTables 的 Bootstrap 5 集成，您可以安装 datatables.net-bs5 包并使用该包

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';

DataTable.use(DataTablesCore);

请注意包名称中使用后缀 -bs5 而不是 -dt 的关键用途，以更改样式集成。

使用 下载构建器 来确保您获得所需的包（仅限这些包！）。

扩展

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

# npm
npm install --save \
    datatables.net-select-dt \
    datatables.net-responsive-dt

# yarn
yarn add \
    datatables.net-select-dt \
    datatables.net-responsive-dt

再次注意 -dt 后缀的使用，它会根据您需要的样式包而改变 - 同样，使用 下载构建器 来获取您需要的包名称！

对于每个扩展，您需要 import 它才能在 DataTables 中注册。例如，同时使用 Select 和 Responsive

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-dt';
import 'datatables.net-select-dt';
import 'datatables.net-responsive-dt';

DataTable.use(DataTablesCore);

请注意，您还需要为扩展提供初始化选项（例如，在此情况下为 select 和 responsive）。有关传递配置选项的详细信息，请参阅下面的使用部分。

相同的安装适用于所有其他 DataTables 扩展。使用 下载构建器 来获取所需扩展的 npm 数据包列表。

使用

在您的组件中安装和注册后，您将有一个 <DataTable> 标签可用于在 Vue 模板中使用（如果您更喜欢其他内容，可以通过更改上面使用的 import 语句来更改名称）。它有一个可选的插槽，可用于描述带有头和尾的表格

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

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

  • columns - 定义用于 DataTables 初始化 的 column 数组
  • data - DataTables 的数据数组。这是可选的，如果您使用 Ajax 加载 DataTable，则不需要数据。
  • ajax - DataTables 的 Ajax 选项 - 用于通过 Ajax 为表格加载数据。
  • class - 要分配给 table 标签的类名称
  • options - 表的 DataTables 选项。请注意，这可能包括 columns、data 和 ajax - 如果它们由上述某个属性提供，则会覆盖此处给出的匹配选项。

基本初始化

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

<script setup>
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>

示例： 基本初始化。

Ajax 数据

您可能希望通过 Ajax 加载表数据以进行显示，而不是使用本地 Vue 数据。这可以通过将 ajax 参数定向到要从中加载数据的 URL 来完成

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

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name', title: 'Name' },
  { data: 'position', title: 'Position' },
  { data: 'office', title: 'Office' },
  { data: 'extn', title: 'Extension' },
  { data: 'start_date', title: 'Start date' },
  { data: 'salary', title: 'Salary' },
];
</script>

<template>
    <DataTable
        :columns="columns"
        ajax="/data.json"
        class="display"
    />
</template>

为了简洁，上面的样板代码已删除。

示例： Ajax 数据示例，演示了如何将对象用作数据源，通过 columns.data 选项填充表格。

事件

DataTables 会发出大量事件，当事件发生时，监听并对这些事件做出反应很有用。使用 DataTables/Vue 组件，您可以像使用常规 Vue 事件处理程序一样监听事件 - 即使用 @ 监听器

<DataTable
    ajax="/data.json"
    @xhr="xhrEvent"
    @draw="drawEvent"
>

此举会监听 xhr 和 draw，调用给定的函数。这些事件将获得与 DataTables 文档中描述相同的参数，但传入的第一个参数除外，该参数是一个包含以下内容的对象

{
    e: Event,
    dt: DataTables.Api
}

示例： 监听事件。

扩展

上面的安装部分展示了如何安装和注册 DataTables 扩展。安装后，可以通过其初始化选项以标准 DataTables 方式使用它们。在此示例中，我们使用 select 选项初始化了选择和响应扩展

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

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name', title: 'Name' },
  { data: 'position', title: 'Position' },
  { data: 'office', title: 'Office' },
  { data: 'extn', title: 'Extension' },
  { data: 'start_date', title: 'Start date' },
  { data: 'salary', title: 'Salary' },
];

const options = {
  responsive: true,
  select: true,
};
</script>

<template>
    <DataTable
        :columns="columns"
        :options="options"
        ajax="/data.json"
        class="display nowrap"
    />
</template>

示例： 响应和选择扩展。

示例： 用于文件导出的按钮扩展，需要使用两个其他函数来分配 JSZip 和 pdfmake。

API

使用 DataTables 时，您常常希望使用 其 API 来释放其全部潜力。这可以通过 datatables.net-vue3 组件提供的 dt() 方法实现。

let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component

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

请注意，确保将 ref="table" 添加到 <DataTable> 组件标签以获取要链接到的引用。现在，您可以使用 API 方法。

响应式数据

Vue 中一个最令人激动且实用的部分是响应式数据。总而言之，这是您更新数据之处（例如，variable = 1），UI 会自动更新以反映此更改 - 无论更改多么复杂。datatables.net-vue3 程序包完全支持 Vue 的响应式数据，并将自动反映对数据所做的更改。

示例：响应式数据

该示例演示了使用 DataTables API 根据 Vue 的响应式数据动态更新表。请注意，我们无需通过任何 API 方法调用来告知 DataTables 新数据 - 只需自动更新即可。

Vue 组件

您可能希望在 DataTable 的单元格内显示 Vue 组件。为此，DataTable 组件支持使用命名插槽，并且基于插槽的名称进行自动和手动分配。

自动插槽

DataTables Vue 组件将自动查找具有以下名称模式的插槽，并将它们分配给匹配的列

  • column-{integer} - 将此插槽分配给匹配索引的列（从零开始）
  • column-{string} - 将此插槽分配给有一列，且其columns.name 属性设置为 {string}。

考虑以下带有两个命名插槽的 DataTable 组件

<template>
    <DataTable ajax="/data.json">
        <template #column-1="props">
            <Button
                :text="`Col 1: ${props.cellData}`"
                @click="rowClick(props.rowData)"
            ></Button>
        </template>
        <template #column-extn="props">
            <Button
                :text="`Extn: ${props.cellData}`"
                @click="rowClick(props.rowData)"
            ></Button>
        </template>
    </DataTable>
</template>

第一个插槽的名称为 column-1，因此它被分配给表中的第二列，并且 <Button> 组件将显示在每行的单元格中。请注意，组件使用传入的属性 - 有关更多详细信息，请参见下面的插槽属性部分。还要注意，它是一个常规 Vue 组件，可以附加事件等。

第二个插槽的名称为 column-extn，因此将被分配给名称通过columns.name 属性设置为 extn 的任何列。

手动插槽

在某些情况下，您可能希望为插槽设置自定义名称。为此，您可以使用columns.render 选项，将其设置为带有 # 前缀与您的插槽名称相匹配的字符串。例如

const columns = [
  // ...
  {
    data: null,
    render: '#action',
    title: 'Action'
  },
  // ...
];

这将与一个名为 action 的插槽像这样一起使用

<template>
    <DataTable ajax="/data.json">
        <template #action="props">
            <Button
                :text="`Col 1: ${props.cellData}`"
                @click="rowClick(props.rowData)"
            ></Button>
        </template>
    </DataTable>
</template>

您可能希望使用自定义名称而不是自动检测的原因是正交数据。正交数据允许 DataTables 为排序、搜索和显示数据类型使用不同的值，这在使用复杂组件时尤其重要。

与 DataTables 的 标准正交数据 一样，你可以使用 columns.render 选项作为包含数据类型列表的对象，其中值指定应从哪里读取值。若要显示组件，请使用 display 属性，并将其设置为要使用的插槽的名称（以 # 开头）。

const columns = [
  // ...
  {
    data: null,
    render: {
      _: 'name',
      display: '#action'
    },
    title: 'Action'
  },
  // ...
];

请注意，如果你不使用正交数据，DataTables 将使用组件的内容进行排序和搜索等操作，就像使用普通 HTML 一样。

插槽属性

Vue 插槽 可以传递属性，我们利用了 DataTables Vue 组件中的这项优势，这样你就可以访问需要渲染的单元格的数据。你可能会注意到上面示例中插槽名称使用的 props 属性值。这是一个由以下结构组成的对象

interface DataTablesNamedSlotProps {
    /** The data to show in the cell (from the `columns.data` configuration) */
    cellData: string;

    /** The column index for the cell (0-based index) */
    colIndex: Number;

    /** The data object for the whole row */
    rowData: any;

    /** Row index for the cell (data index, not the display index) */
    rowIndex: Number;

    /** Orthogonal data type */
    type: string;
}

这些属性可用于渲染组件所需的信息。通常，你会引用 cellData，但是访问整行数据对象对于需要多个数据点的更复杂的组件来说非常有用。rowData 的格式取决于你如何填充 DataTable——它是提供给 DataTables 的原始数据对象（如果数据是从 HTML 读取的，则为数组）。

样式

DataTables 对各种样式库的支持在 Vue 组件中得到了充分支持。例如，考虑我们正在使用 Bootstrap 5——我们页面的其余部分基于 Bootstrap 5 样式，我们的 DataTable 也应反映这一点。我们有 DataTables 核心及其所有与 Bootstrap 5（和其他样式框架）配套的扩展的 npm 包——它们以 -bs5 结尾（例如，Bootstrap 5 和 DataTables 核心为 datatables.net-bs5），而默认样式带有 -dt 后缀。请参阅 下载构建器，获取你首选框架所需的样式包。

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

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

# yarn
yarn add datatables.net-dt

然后在 <style> 标记中包含它（请注意，我们在这里使用 Vite 来构建包，它将解析来自 Node 包和 Javascript 的 CSS 样式，从而使其起作用）

<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 实际操作 中看到。

页面导航

DataTables

DataTables 由 SpryMedia Ltd 设计和创建。
© 2007-2024 MIT 许可。 隐私政策。 支持者。
SpryMedia Ltd 在苏格兰注册，公司编号为 SC456502。