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