element 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 = "暫無數據";
          }
        }
      });
    }

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM