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 = "暂无数据";
          }
        }
      });
    }

  

posted @ 2019-11-19 21:47  纯白棒球帽  阅读(5412)  评论(1编辑  收藏  举报