我正在尝试使用Axios的Vue加载大量数据，并且有加载动画。问题在于，一旦加载完成，整个页面将在渲染过程中冻结，该表将显示为空列，并在几秒钟后显示数据。
如何在不冻结整个页面的情况下实现这一目标？我只想慢慢淡入加载的数据，而不是冻结页面，一切都在转储之后
<div id="AbastecimentosComponent">
<div v-if="loading" class="text-center">
<div class="tracking-out-contract font-weight-bold">A Carregar dados...</div>
<img v-show="loading" src="~/images/ajax/loader.svg" />
</div>
<div v-else>
<div class="row pb-2">
<div class="col-md-12">
<div class="form-inline">
<div class="input-group ">
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<input class="form-control" v-model="searchText" placeholder="Procurar" />
</div>
<div class="actions btn-group">
<button class="btn btn-default">
<i class="fas fa-sync-alt"></i>
</button>
<div class="dropdown btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="dropdown-text">10</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li class="active" aria-selected="true">
<a data-action="10" class="dropdown-item dropdown-item-button">10</a>
</li>
<li aria-selected="false">
<a data-action="25" class="dropdown-item dropdown-item-button">
25
</a>
</li>
<li aria-selected="false">
<a data-action="50" class="dropdown-item dropdown-item-button">
50
</a>
</li>
<li aria-selected="false">
<a data-action="-1" class="dropdown-item dropdown-item-button">
All
</a>
</li>
</ul>
</div>
<div class="dropdown btn-group"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="dropdown-text"><span class="icon fa fa-th-list"></span></span> <span class="caret"></span></button><ul class="dropdown-menu pull-right" role="menu"><li><label class="dropdown-item"><input name="id" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> ID</label></li><li><label class="dropdown-item"><input name="sender" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Sender</label></li><li><label class="dropdown-item"><input name="received" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Received</label></li><li><label class="dropdown-item"><input name="commands" type="checkbox" value="1" class="dropdown-item-checkbox" checked="checked"> Commands</label></li></ul></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-sm custom-table">
<thead>
<tr>
<th>Referência</th>
<th>UAP</th>
<th>Consumo Inicial Semana 1</th>
<th>Consumo Actual Semana 1</th>
<th>Consumo Inicial Semana 2</th>
<th>Consumo Actual Semana 2</th>
<th>Consumo Diário Semana 1</th>
<th>Consumo Diário Semana 2</th>
<th>Quantidade Por Caixa</th>
<th>Nº de Caixas</th>
<th>Stock</th>
<th>Stock Mínimo</th>
<th>Stock Máximo</th>
<th>Estado</th>
</tr>
</thead>
<tbody v-cloak>
<transition name="fade">
<tr v-for="item in itemsSearched">
<td>{{ item.referencia }} </td>
<td>{{ item.uap }} </td>
<td>{{ item.consumoInicialWeek01 }} </td>
<td>{{ item.consumoActualWeek01 }} </td>
<td>{{ item.consumoInicialWeek02 }} </td>
<td>{{ item.consumoActualWeek02 }} </td>
<td>{{ item.consumoDiarioWeek01 }} </td>
<td>{{ item.consumoDiarioWeek02 }} </td>
<td>{{ item.qtdPorCaixa }} </td>
<td>{{ item.numCaixas }} </td>
<td>{{ item.stock }} </td>
<td>{{ item.stockMin }} </td>
<td>{{ item.stockMax }} </td>
<td>{{ item.estado }} </td>
</tr>
</transition>
</tbody>
</table>
</div>
</div>
</div>
</div>
我正在使用服务器端生成用于测试目的的数据
public IActionResult OnGetAbastecimentos()
{
List<AbastecimentoViewModel> abastecimentosList = new List<AbastecimentoViewModel>();
for(int i = 0; i < 250; i++)
{
abastecimentosList.Add(
new AbastecimentoViewModel
{
Id = 1,
Referencia = "M130069",
UAP = "UAP4",
ConsumoInicialWeek01 = 1000,
ConsumoActualWeek01 = 1000,
ConsumoDiarioWeek01 = 200,
ConsumoInicialWeek02 = 1500,
ConsumoActualWeek02 = 1500,
ConsumoDiarioWeek02 = 300,
QtdPorCaixa = 200,
NumCaixas = 1,
Stock = 5000,
StockMax = 100,
StockMin = 250,
Estado = "OK"
});
abastecimentosList.Add(
new AbastecimentoViewModel
{
Id = 2,
Referencia = "M130069",
UAP = "UAP3",
ConsumoInicialWeek01 = 1000,
ConsumoActualWeek01 = 1000,
ConsumoDiarioWeek01 = 200,
ConsumoInicialWeek02 = 1500,
ConsumoActualWeek02 = 1500,
ConsumoDiarioWeek02 = 300,
QtdPorCaixa = 200,
NumCaixas = 1,
Stock = 5000,
StockMax = 100,
StockMin = 250,
Estado = "OK"
});
}
//var data = new { data = abastecimentosList };
return new JsonResult(abastecimentosList);
}
这是vue配置
<script>
var app = new Vue({
el: '#AbastecimentosComponent',
data: {
searchText: '',
items: [],
loading: false
},
mounted() {
this.getItems();
},
methods: {
getItems() {
axios.get("/Account/Abastecimentos/Index?handler=Abastecimentos")
.then(response => {
this.items = response.data;
this.loading = false;
})
.catch(error => {
console.log(error);
});
}
},
computed: {
itemsSearched: function () {
var self = this;
if (this.searchText == '') {
return this.items;
}
return this.items.filter(function (item) {
return item.uap.indexOf(self.searchText) >= 0;
});
}
}
});
</script>