如何使用分页远程将 axios 与 Tabulator-vue 一起使用答案

【问题标题】：How to use axios with Tabulator-vue using pagination-remote如何使用分页远程将 axios 与 Tabulator-vue 一起使用
【发布时间】：2020-03-07 11:45:36
【问题描述】：

剧透警报，这不同于：Tabulator + Nuxt.js: How to use axios in callbacks?

我通过它的 vue 包装器使用 Tabulator 组件：https://github.com/angeliski/vue-tabulator 主要是使用远程分页模式（即服务器端的东西）显示数据。

我查看了文档：http://tabulator.info/docs/4.4/page#remote，似乎没有任何东西可以让我（自己）执行 API 调用。

有一些选项可以调整（如 url、标题，但我没有掌握调用 API 的实际内容）由 Tabulator 使用的底层函数进行的调用，但没有什么可以完全替换它.

我想在我的 vue 项目中为 Tabulator 组件执行的每个调用重用已经为 auth + sso 配置的 axios。

我怎样才能做到这一点？

【问题讨论】：

标签： typescript vue.js axios tabulator

【解决方案1】：

Tabulator 允许您通过将函数传递给 ajaxRequestFunc 设置选项来覆盖内置的 ajax 加载器。

该函数应该返回一个用表数据解析的承诺。

更多信息可以在 ajax 文档的Overriding the Request Promise 部分找到。

function queryRealm(url, config, params){
    //url - the url of the request
    //config - the ajaxConfig object
    //params - the ajaxParams object

    //return promise
    return new Promise(function(resolve, reject){
        //do some async data retrieval then pass the array of row data back into Tabulator
        resolve(data);

        //if there is an error call this function and pass the error message or object into it
        reject();
    });
}

var table = new Tabulator("#example-table", {
    ajaxRequestFunc:queryRealm,
});

【讨论】：