亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

制表符 - 如何在基于道具從數據庫中獲取數據時顯示加載指示器?

制表符 - 如何在基于道具從數據庫中獲取數據時顯示加載指示器?

RISEBY 2022-12-22 13:15:11
我在我的 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?
查看完整描述

2 回答

?
慕無忌1623718

TA貢獻1744條經驗 獲得超4個贊

當 Tabulator 通過 ajax 加載數據時,它有一個內置的加載覆蓋,可以在ajaxLoaderLoading選項上自定義

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

如果您想在 Tabulator 之外加載數據,然后使用setData命令加載數據,那么這超出了 Tabulator 的范圍。

最簡單的方法是將元素絕對定位在觸發數據庫加載時顯示的 Tabulator 上。


查看完整回答
反對 回復 2022-12-22
?
楊__羊羊

TA貢獻1943條經驗 獲得超7個贊

在制表符 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,

    ...


查看完整回答
反對 回復 2022-12-22
  • 2 回答
  • 0 關注
  • 94 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號