tabulator - как отобразить индикатор загрузки, когда данные извлекаются из базы данных на основе опоры? - PullRequest
Новая
       36

tabulator - как отобразить индикатор загрузки, когда данные извлекаются из базы данных на основе опоры?

0 голосов
/ 06 августа 2020

Я создал компонент табулятора в своем приложении 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), но понял, что он неприменим, потому что он также отображается, когда данные не отображаются.

есть ли способ указать Tabulator предпочтительно рендеринг загрузочного счетчика или текста на основе моей опоры isLoading?

1 Ответ

1 голос
/ 26 августа 2020

Табулятор имеет встроенный оверлей загрузки, когда он загружает данные через ajax, который можно настроить с помощью ajaxLoaderLoading опции 

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

Если вы хотите загрузить свои данные вне табулятора, а затем загрузить данные с помощью команды setData , тогда это выходит за рамки табулятора.

Самый простой подход к этому - абсолютно позиционировать элемент над табулятором, который отображается при запуске загрузки БД.

...