Laravel+Vue项目中DataTable桌面正常移动端不显示数据且按钮失效问题

问题根因&解决方法 #

1. 优先排查API地址配置问题 #

这是最可能的原因：你项目里store.state.apiURL大概率配置的是localhost或127.0.0.1，桌面端访问时指向的是本地开发环境服务，而移动端访问时localhost指向的是手机自身，自然无法请求到你电脑上的本地API，公网API是可被公网访问的地址所以不受影响。
解决方式：

• 确保电脑和移动端连接同一个WiFi
• 查看电脑的局域网IP（例如Windows cmd执行ipconfig，Mac/Linux执行ifconfig，一般是192.168.x.xxx格式）
• 将store.state.apiURL修改为http://你的电脑局域网IP:Laravel服务端口，比如http://192.168.3.12:8000

2. 排查跨域配置问题 #

本地Laravel服务如果没有配置跨域头，移动端跨域请求会被浏览器拦截，公网API一般默认配置了跨域规则所以可以正常访问。
解决方式：
Laravel项目安装fruitcake/laravel-cors扩展包，按照官方文档配置允许跨域的路由、请求源即可。

3. 修复DataTable响应式模式下事件失效问题 #

你用了DataTable的响应式插件，移动端视口较窄时会默认折叠优先级低的列，折叠后的列是DataTable动态生成的DOM，没有绑定Vue的@click事件，所以点击编辑按钮无响应。
修改全局DataTable初始化规则，强制操作列不被折叠：

Vue.prototype.$tableGlobal = function(table) {
    this.$nextTick(() => {
        $(table).DataTable({
            responsive: true,
            columnDefs: [
                // 最后一列是操作列，设置最高响应优先级，禁止折叠
                { targets: -1, orderable: false, responsivePriority: 1 }
            ]
        });
    });
}

4. 优化DataTable销毁重建时机 #

你当前的Table重载逻辑没有判断实例是否存在，且销毁操作没有等待DOM更新完成，可能会导致移动端渲染异常：

reloadTable() {
    this.$nextTick(() => {
        // 先判断实例是否存在再销毁
        if ($.fn.DataTable.isDataTable('#tblDependencies')) {
            $('#tblDependencies').DataTable().destroy();
        }
        this.$tableGlobal('#tblDependencies');
    })
}

调试建议 #

移动端连接电脑开启USB调试，用Chrome的chrome://inspect功能查看移动端控制台的报错、网络请求状态，可以快速定位具体问题。

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