制表符 - 如何在基于道具从数据库中获取数据时显示加载指示器？

Question

我在我的 vue 应用程序中创建了一个制表符组件，我正在传递制表符选项data并columns通过道具如下：// parent component<template>    <div>        <Tabulator :table-data="materialsData" :table-columns="options.columns" :is-loading="materials.isLoading" />    </div></template>...// Tabulator componentprops: {    tableData: {        type: Array,        default: function() {            return [                { name: "Billy Bob", age: "12" },                { name: "Mary May", age: "1" },            ];        },    },    tableColumns: {        type: Array,        default: function() {            return [                { title: "Name", field: "name", sorter: "string", width: 200, editor: true },                { title: "Age", field: "age", sorter: "number", align: "right", formatter: "progress" },            ];        },    },    isLoading: {        type: Boolean,        default: true,    },},mounted() {    // instantiate Tabulator    this.tabulator = new Tabulator(this.$refs.table, {        placeholder: "loading data...",        //placeholder: "<font-awesome-icon icon='circle-notch' spin size='2x' />",        data: this.tableData, // link data to table (passed as prop)        columns: this.tableColumns, // define table columns (passed as prop)    });},除了向用户指示数据正在加载之外，一切都运行良好。我首先尝试使用占位符选项 ( http://tabulator.info/docs/4.7/layout#placeholder ) 但意识到它不适用，因为它也在没有数据显示时呈现。有没有办法告诉 Tabulator 根据我的道具优先呈现加载微调器或文本isLoading？

Answer 1

当 Tabulator 通过 ajax 加载数据时，它有一个内置的加载覆盖，可以在ajaxLoaderLoading选项上自定义

var table = new Tabulator("#table", { 
   ajaxLoaderLoading:"<span>Loading Data</span>",
});

如果您想在 Tabulator 之外加载数据，然后使用setData命令加载数据，那么这超出了 Tabulator 的范围。

最简单的方法是将元素绝对定位在触发数据库加载时显示的 Tabulator 上。

Answer 2

在制表符 5 中，新选项称为dataLoaderLoading。根据文档，您可以传递“html”。在代码中，这可以是字符串或 html 组件。我认为当您传递一个字符串并且未正确生成 html 时存在一个错误（从我可以告诉模板元素的使用方式）。所以为了让它工作，我必须传递 html 元素，如下所示：

const template = document.createElement('template');

template.innerHTML = '<div style="display:inline-block;" class="d-flex flex-row">' +

                    '<div>Loading... </div>' +

                    '<div class="ml-2 activity-sm" data-role="activity" data-type="atom" data-style="dark"></div>' +

                '</div>';

const dataLoaderLoading = template.content.firstChild;

...

new Tabulator("#mytable", {

    dataLoaderLoading: dataLoaderLoading,

    ...