如何在Vue.js 2项目中使用datatables.js？Laravel+Vue响应式表格异常排查

嘿，我来帮你搞定这两个问题！先从Vue.js 2里集成DataTables的基础步骤说起，再解决你Laravel+Vue项目里的那个异常问题。

DataTables依赖jQuery，所以我们得先把必要的依赖装好，再一步步集成到组件里：

• 第一步：安装依赖
  用npm或者yarn安装jQuery、DataTables核心包以及默认样式：

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

• 第二步：在Vue组件中引入
  在需要使用DataTables的组件里，局部引入jQuery、样式和DataTables核心：

  import $ from 'jquery';
  import 'datatables.net-dt/css/jquery.dataTables.css';
  import 'datatables.net';
  

• 第三步：初始化DataTables
  要等DOM渲染完成后再初始化，所以放在mounted钩子中；同时为了避免单页应用切换路由时的内存泄漏，记得在组件销毁前销毁DataTables实例：

  <template>
    <table id="myDataTable" class="display">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据会在这里填充 -->
      </tbody>
    </table>
  </template>
  
  <script>
  import $ from 'jquery';
  import 'datatables.net-dt/css/jquery.dataTables.css';
  import 'datatables.net';
  
  export default {
    mounted() {
      // 初始化表格
      $('#myDataTable').DataTable();
    },
    beforeDestroy() {
      // 销毁实例，避免内存泄漏
      $('#myDataTable').DataTable().destroy();
    }
  }
  </script>
  

看了你提供的API调用代码，问题大概率出在DataTables没有感知到Vue数据更新上——因为DataTables是基于DOM初始化的，如果你先初始化了表格再加载数据，或者只是修改Vue的data而没通知DataTables，就会出现异常。下面给你两种靠谱的解决思路：

方法一：等待数据加载完成后再初始化DataTables #

修改你的getUsers方法，等Vue把数据渲染到DOM后，再初始化（或重新初始化）DataTables：

<template>
  <table id="usersTable" class="display">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import $ from 'jquery';
import 'datatables.net-dt/css/jquery.dataTables.css';
import 'datatables.net';
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      dataTableInstance: null // 保存表格实例，方便后续销毁/更新
    }
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('/api/users')
        .then(response => {
          if(response.status === 200) {
            this.users = response.data.users;
            // 用$nextTick等待Vue更新DOM后再处理表格
            this.$nextTick(() => {
              // 如果之前有实例，先销毁避免重复初始化
              if(this.dataTableInstance) {
                this.dataTableInstance.destroy();
              }
              // 初始化带响应式的DataTables
              this.dataTableInstance = $('#usersTable').DataTable({
                responsive: true
              });
            });
          }
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  beforeDestroy() {
    if(this.dataTableInstance) {
      this.dataTableInstance.destroy();
    }
  }
}
</script>

方法二：让DataTables直接处理AJAX请求（更推荐） #

DataTables自带AJAX功能，完全可以不用手动写axios调用，让它自己去请求API并填充数据，这样更贴合DataTables的设计：

<template>
  <table id="usersTable" class="display">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
  </table>
</template>

<script>
import $ from 'jquery';
import 'datatables.net-dt/css/jquery.dataTables.css';
import 'datatables.net';

export default {
  mounted() {
    $('#usersTable').DataTable({
      responsive: true, // 开启响应式
      ajax: {
        url: '/api/users',
        type: 'GET',
        dataSrc: 'users' // 对应你的API返回数据里的users数组字段
      },
      columns: [
        { data: 'id' },
        { data: 'name' },
        { data: 'email' }
      ]
    });
  },
  beforeDestroy() {
    $('#usersTable').DataTable().destroy();
  }
}
</script>

另外，你可以先检查下console.log(this.users)的输出，确认API返回的是预期的数组格式——如果数据结构不对，也会导致表格填充失败哦。

内容的提问来源于stack exchange，提问作者Камилов Тимур