zoukankan      html  css  js  c++  java
  • element table 先显示暂无数据 之后再加载数据 问题

    项目中的表格请求数据时,进去页面,先出现 ''暂无数据'' 字样闪现一下之后在进行加载数据,用户体验十分不好

      解决办法:

      

      <template>
          <el-table :data="tableData" style=" 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 = "暂无数据";
              }
            }
          });
        }
    

      

  • 相关阅读:
    noip2010 乌龟棋
    noip2010 机器翻译
    noip2009 靶形数独
    noip2009 最优贸易
    noip2009 Hankson的趣味题
    noip2009 潜伏者
    noi2010 能量采集
    八大排序算法(六) 快速排序
    八大排序算法(六) 快速排序
    Lesson 12 Nehe
  • 原文地址:https://www.cnblogs.com/yanyanliu/p/11892658.html
Copyright © 2011-2022 走看看