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

Question

我在我的 vue 应用程序中创建了一个制表符组件，我正在通过道具传递制表符选项 data 和 columns，如下所示：

// parent component
<template>
    <div>
        <Tabulator :table-data="materialsData" :table-columns="options.columns" :is-loading="materials.isLoading" />
    </div>
</template>

...

// Tabulator component
props: {
    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)，但意识到它不适用，因为它在没有数据显示时也会呈现。

有没有办法根据我的 prop isLoading 告诉 Tabulator 优先呈现加载微调器或文本？

Answer 1

Tabulator 在通过 ajax 加载数据时有一个内置的加载叠加层，可以在 ajaxLoaderLoading 上自定义]选项

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

如果您想在 Tabulator 之外加载数据，然后使用 setData 命令加载数据，那么这个不在制表符范围内。

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

Answer 2

在制表符 5 中，新选项称为 dataLoaderLoading。根据documentation你可以传一个'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,
    ...

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

tabulator - how to display a loading indicator while data is fetched from db based on a prop?

javascript

vue.js

tabulator