項目中的表格請求數據時,進去頁面,先出現 ''暫無數據'' 字樣閃現一下之后在進行加載數據,用戶體驗十分不好
解決辦法:
<template>
<el-table :data="tableData" style="width: 100%">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
data() {
return {
tableData: [],
dataText: "" //進去頁面先讓字樣為空
};
},
//請求數據
goodsList() {
//先將變量清空
this.dataText = "";
this.$request(
this.$config.baseApi + "/user/address/inde", "get" ).then(res => {
if (res.code === 200) {
this.tableData = res.data.content;
// 當請求后台,數據為空時,再讓頁面顯示暫無數據
if (this.tableData.length === 0) {
this.dataText = "暫無數據";
}
}
});
}
