Vue 3 + DataTables.net：数据表在过滤时不会更新

Question

首次打开 HomeView 时，数据表中会填充数据，但是当更改时，例如“显示 10 条”到“显示 25 条”数据表留空，数据不再显示在表中。

注意：我并不是在询问其他数据表库的使用建议。

我正在 main.ts 中导入以下库：

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'datatables.net-dt/js/dataTables.dataTables'
import 'datatables.net-dt/css/jquery.dataTables.min.css'
import 'jquery/dist/jquery.min.js';

HomeView.vue（视图）：

<template>
  <DataTable :dataSource="dataSource" />         
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import DataTable from '@/components/DataTable.vue'

const dataSource = ref([])

onMounted(async () => {
    const response = await axios.get("https://jsonplaceholder.typicode.com/users")
    dataSource.value = response.data
})
</script>

DataTable.vue（组件）：

<template>
    <div>
        <h1>Title</h1>
        
        <table class="table table-hover table-bordered" id="example">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="entry in dataSource" :key="entry.id">
                    <td>{{entry.id}}</td>
                    <td>{{entry.name}}</td>
                    <td>{{entry.email}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, withDefaults } from 'vue'
import $ from 'jquery'; 

interface Props {
    dataSource: Array
}

withDefaults(defineProps<Props>(), {
    dataSource: Array
})

onMounted(() => {
    $('#example').DataTable()
})

</script>

Answer 1

使用此数据表

https://www.npmjs.com/package/data-table-vue-v3

它具有许多高级功能并且完全免费！

兼容 vue 2 和 vue 3