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

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

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

Answer 1

当 Tabulator 通过 ajax 加载数据时，它有一个内置的加载覆盖，可以在ajaxLoaderLoading选项上自定义var&nbsp;table&nbsp;=&nbsp;new&nbsp;Tabulator("#table",&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;ajaxLoaderLoading:"<span>Loading&nbsp;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">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div>Loading... </div>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div class="ml-2 activity-sm" data-role="activity" data-type="atom" data-style="dark"></div>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>';const dataLoaderLoading = template.content.firstChild;...new Tabulator("#mytable", {&nbsp; &nbsp; dataLoaderLoading: dataLoaderLoading,&nbsp; &nbsp; ...