如何在Inertia Vue中使用DataTable？最优实现方案探讨

一、你当前jQuery方案的注意事项 #

你现在用mounted钩子初始化jQuery DataTable的写法是可行的，但要解决Vue响应式和jQuery DOM操作的冲突问题，否则会出现数据不更新、重复渲染或内存泄漏：

• 监听数据变化，更新时销毁旧实例再重新初始化：

  watch: {
    data(newData) {
      const tableInstance = $(this.$refs.table).DataTable();
      tableInstance.destroy();
      $(this.$refs.table).DataTable({
        data: newData,
        columns: [
          { title: 'ID', data: 'id' },
          { title: 'Name', data: 'name' },
        ]
      });
    }
  }
  

• 组件销毁前清理DataTable实例：

  beforeUnmount() {
    $(this.$refs.table).DataTable().destroy();
  }
  

二、最优方案：使用Vue原生DataTable组件 #

Inertia是基于Vue的SPA框架，优先选择原生Vue生态的DataTable组件，完全规避jQuery和Vue的兼容性问题，更贴合响应式开发模式，推荐几个主流选项：

1. Vuetify v-data-table（适配Vuetify项目） #

如果你的项目用了Vuetify UI库，直接用v-data-table，内置排序、分页、搜索等功能，完全响应式：

<template>
  <v-data-table
    :items="data"
    :headers="headers"
    :search="searchKeyword"
    show-select
    paginate
  ></v-data-table>
</template>

<script setup>
import { ref } from 'vue';

const headers = [
  { title: 'ID', key: 'id' },
  { title: 'Name', key: 'name' },
];
const data = ref([/* 你的业务数据 */]);
const searchKeyword = ref('');
</script>

2. PrimeVue DataTable（功能全面） #

PrimeVue的DataTable支持筛选、排序、分页、导出、行编辑等复杂功能，适合企业级场景：

<template>
  <DataTable :value="data" paginator rows="10" :rows-per-page-options="[10, 20, 50]">
    <Column field="id" header="ID"></Column>
    <Column field="name" header="Name"></Column>
  </DataTable>
</template>

<script setup>
import { ref } from 'vue';
import { DataTable, Column } from 'primevue/datatable';

const data = ref([/* 你的业务数据 */]);
</script>

3. vue-good-table（轻量极简） #

如果只需要基础的表格功能，vue-good-table体积小、配置简单，适合轻量项目：

<template>
  <vue-good-table
    :columns="columns"
    :rows="data"
    :search-options="{ enabled: true }"
  ></vue-good-table>
</template>

<script setup>
import VueGoodTable from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css';

const columns = [
  { label: 'ID', field: 'id' },
  { label: 'Name', field: 'name' },
];
const data = ref([/* 你的业务数据 */]);
</script>

三、结合Inertia的进阶优化 #

不管用哪种方案，都可以利用Inertia的特性提升体验：

• 服务端分页/搜索：数据量较大时，通过Inertia的路由传递分页、搜索、排序参数，后端处理后返回分页数据，前端直接渲染，避免一次性加载大量数据。
• 状态持久化：用Inertia的remember功能或URL查询参数保存搜索关键词、当前页码，页面刷新后自动恢复状态。

内容的提问来源于stack exchange，提问作者gokul