2022 年 6 月 22 日星期三

作者：Allan Jardine

Vue3 組件

Vue.js 是一個廣泛用於建立反應式 Web 應用程式的前端 Javascript 框架。它一直是最受歡迎的框架之一，在這篇文章中，我將介紹 datatables.net-vue3 套件，該套件提供 DataTables 作為 Vue3 應用程式中的組件使用。

想直接深入了解一些範例程式碼嗎？這當然是個程式碼部落格！以下範例顯示在 Stackblitz 上，DataTables 如何在 Vue3 應用程式中使用，這讓我們可以執行整個基於 Node.js 的應用程式。這些範例使用 Vue3 的組合式 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.use() 方法向 DataTable 組件註冊 - 例如：

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 應用程式 (組合式 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;
});

現在要刪除列，我們可以使用 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 結尾 (例如，Bootstrap 5 和 DataTables 核心的 datatables.net-bs5)。預設樣式具有 -dt 後綴。請參閱下載產生器，以取得您偏好框架所需的樣式套件。

使用預設樣式，只需安裝樣式套件

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

# yarn
yarn add datatables.net-dt

然後將其包含在您的 <style> 標籤中 (請注意，我們在此處使用 Vite 來建置套件，它會解析來自節點套件和 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 的實際應用。

原始碼

用於 Vue 的 DataTables 組件在 MIT 授權下為開放原始碼。原始碼可在 Github 上取得。

意見反應

我們在我們的 CloudTables 設定 UI 中廣泛使用 Vue，這個組件建立在此經驗之上。但是，一如既往，仍然有改進的空間！如果您有任何建議和問題，或者甚至只是想說您正在使用它，請與我們聯繫，以便我們可以將其回饋到我們自己的開發和文件工作中。此組件的下一步可能是正式化我們手冊中的文件。敬請期待。