element el-tree、el-table組件加載數據前閃現 暫無數據 清除

相信很多人在使用element  el-tree、el-table組件加載數據前會顯示一個“ 暫無數據 ”，體驗很不友好，有沒有辦法處理不顯示呢？答案是：有的。廢話不多說直接上代碼解說：

<!--el-tree "暫無數據" 不顯示處理-->

<template>
  <el-tree
   :empty-text="emptyText"
   :expand-on-click-node="false"
   :props="defaultProps"
   :load="loadNode"
   node-key="id"
   lazy>
   <div class="custom-tree-node" slot-scope="{ node, data }">
    <!--節點渲染-->
   </div>
  </el-tree>
</template>
<script>
export default {
  data() {
   return {
   emptyText:"",
   }
  },
　　

//* 利用el-tree 自帶的empty-text屬性綁定一個初始化空值，當拿到tree數據時判斷數據長度，當數據長度為0時設置emptyText值為"暫無數據"即可
</script>

<!--el-table "暫無數據" 不顯示處理-->
<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 = "暫無數據";
         }
       }
     });
   }