Vuejs2 Vuetify：如何在v-data-table渲染时使用微调器显示覆盖（如何等待组件完成渲染）

我有一个Vuetify v-data表，其中大约有1000行。第一次渲染它，在对其进行文本搜索时，渲染需要几秒钟。在此期间，我想用scrim+微调器覆盖它，以指示正在发生的事情

覆盖层：

    <v-overlay
        :value="loading"
        opacity="0.7"
        absolute
        v-mutate="onMutate"
    >
        <v-progress-circular indeterminate size="32" color="blue"></v-progress-circular>
    </v-overlay>

我观察

search

变量，当它改变时，我将

load

设置为true以激活覆盖

watch: {
    search() {
        if (!this.indNoLimit) {
            // remove limit, this will cause cLimitedData to return all rows
            this.loading = true
            // -> moved to onMutate
            //this.$nextTick(function () {
            //    this.indNoLimit = true
            //})
        } else {
            this.searchIntercepted = this.search
        }
    },

但是，直到v-data-table完成渲染后，覆盖才会激活。我已经尝试了一百万种方法，其中之一是在覆盖层上放置一个

v-mutate=“onMutate”

，只有当它启动时，我才会

this.indNoLimit=true

来启动这些方法，但这仍然不足以在v-data-table开始重新加载之前启动scrim

    onMutate(thing1) {
        console.log('@onMutate',thing1)
        this.$nextTick(function () {
            this.indNoLimit = true
            this.searchIntercepted = this.search
        })
    },

我还发现@current items中的下一个勾号相当可靠地标记了v-data-table的呈现结束，因此scrim的停用可能是可以的：

    tstCurrentItems(thing1) {
        console.log('@current-items',thing1)
        this.$nextTick(function () {
            console.log('@current-items NEXT')
            this.loading = false
        })

我认为我的问题应该是：在对其他组件（v-data-table）进行更改之前，如何检测/等待组件已渲染（v-overlay+v-progress-circular）。

注意：为了解决加载表的初始等待时间问题，我找到了一种方法，通过插入触发v-intersect的div标记来逐步加载表。但是，这并不能解决用户在仅加载前50行时搜索整个数据集的情况

---

编辑：尝试在使用激活覆盖后开始更新表，但仍然没有成功。看起来vue几乎是在尝试聚合对DOM的更改，而不是逐个执行这些更改。

我还没有弄明白为什么v-data-table似乎会阻塞/冻结，但这里有一个解决方案可以简化任何大型v-data-table：

        <v-data-table
            :headers="cHeaders"
            :items="cLimitedData"
            disable-pagination
            hide-default-footer
            :search="searchIntercepted"
            @current-items="tstCurrentItems"
        >

v-data-table：

        <v-data-table
            :headers="cHeaders"
            :items="data"
            :items-per-page="dtRowTo"
            hide-default-footer
            hide-default-header
            :search="search"
            item-key="id"
        >
            <template
                v-slot:item="{item, index, isSelected, select, headers}"
            >
                <tr>
                    <td
                        :colspan="headers.length"
                    >
                        Stuff
                        <div v-if="(index+1)%25==0" v-intersect.quiet.once="onIntersect">{{index+1}}</div>
                    </td>
                </tr>
            </template>
        </v-data-table>

        onIntersect (entries, observer) {
            let index = entries[0].target.textContent
            if (index == this.dtRowTo) {
                this.dtRowTo += this.dtRowIncr
            }
        },

在内部：

        <v-data-table
            :headers="cHeaders"
            :items="data"
            :items-per-page="dtRowTo"
            hide-default-footer
            hide-default-header
            :search="search"
            item-key="id"
        >
            <template
                v-slot:item="{item, index, isSelected, select, headers}"
            >
                <tr>
                    <td
                        :colspan="headers.length"
                    >
                        Stuff
                        <div v-if="(index+1)%25==0" v-intersect.quiet.once="onIntersect">{{index+1}}</div>
                    </td>
                </tr>
            </template>
        </v-data-table>

        onIntersect (entries, observer) {
            let index = entries[0].target.textContent
            if (index == this.dtRowTo) {
                this.dtRowTo += this.dtRowIncr
            }
        },

不幸的是，您无法将索引作为参数添加，例如

v-intersect.quiet.one=“oniintersect（index）”

，因为这会在您与它相交之前执行函数（不确定原因），因此我们必须将索引从textContext中删除

基本上你要做的就是每次你在底部的时候增加页面大小。搜索仍将在整个数据集上运行

不起作用的是（我通过艰难的方式发现了这一点）递增的项，如下面的计算函数。由于搜索需要整个数据集出现在：items中，因此这将不起作用：

        <v-data-table
            :items="cLimitedData"

computed: {
    cLimitedData() {
        return this.data.slice(0,this.dtRowTo)
    },
}