技术标签： Vue element-ui

项目中的表头和内容都是动态请求生成的，延时更久就会出现先闪一下（比闪一下更久）暂无数据，再显示正常界面的问题，用户体验会比较差。

解决办法：动态定义tablelist为空时候展示的内容，没有请求到数据之前显示为空，请求到数据但是数据本身就是空的再显示"暂无数据"

empty-text为table组件空数据时显示的文本内容，也可以通过slot="empty"设置

Table组件：

 <!--增加内容-->
  <template slot="empty">
  <p>{{tableText}}</p>
  </template>

  <el-table-column v-if="showSelect" type="selection" width="55"></el-table-column>

data中初始定义tableText为空：

data() {
   return {
     tableText: "" //进去页面先让字样为空
   };
 },

发请求之后，若得到的tablelist真为懂再显示“暂无数据”：

 getList() {
    this.tableText = " ";  //先置空             
    getApportRecpList({params).then((res:any) => {  
       this.headGroups = headGroupsTemp;
       this.list = res.data.dataList;
       if (this.list.length === 0) {
           this.tableText = "暂无数据";
         }   
    });
 
  }

版权声明：本文为a1059526327原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1059526327/article/details/110374558

更新方法：
用异步请求async、await，需配合loading

export default {
  data() {
    return {
		totalPage: 0,
		dataListLoading: false,
		dataList: [],
			}
		},
		
  async created() {
    this.getDataList()
  },
methods: {
    // 获取数据
    getDataList() {
      this.dataListLoading = true;
      clazzOrderBy(this.searchForm).then(response => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        this.dataListLoading = false;
      }).catch(() => {
        this.dataListLoading = false;
      })
    },
}
}
<el-table
 :data="dataList" border v-loading="dataListLoading" height="350" stripe element-loading-text="数据加载中,请耐心等待...">
      <el-table-column prop="specialtyCount" header-align="left" align="left" label="班级名称/编号" width="300" fixed="left">
      <template slot-scope="{ row }">
        <span>{{row.name}}</span>
      </template>
      </el-table-column>
      </el-form>