Element UI el-table 空数据显示“数据加载中”问题及解决
在使用 Element UI 的 el-table 组件时，当表格数据为空时，通常会显示“暂无数据”的提示。然而，有时即使 tableData 数据为空数组，界面仍然长时间显示“数据加载中”，无法正常显示“暂无数据”。
问题根源分析
此问题通常源于代码中其他地方使用了 v-loading 指令，导致即使 tableData 为空，加载动画仍然持续显示。
解决方案
移除或禁用 v-loading： 检查代码中是否使用了 v-loading 指令，并尝试将其移除或将其值设置为 false。这将明确告知组件当前没有数据正在加载。
条件渲染 v-loading： 如果需要在数据加载过程中显示 v-loading，请确保其仅在数据加载期间显示。可以通过一个布尔变量来控制 v-loading 的显示与隐藏。例如：
data() { return { tableData: [], isLoading: true, // 数据加载状态 };},created() { this.fetchData().then(() => { this.isLoading = false; });},methods: { fetchData() { // 你的数据获取逻辑 return new Promise((resolve) => { setTimeout(() => { // 模拟数据获取 this.tableData = []; // 或获取到的数据 resolve(); }, 1000); }); }}
在模板中：
正确初始化 tableData： 在组件的 data 或 created 生命周期中，将 tableData 初始化为空数组：
data() { return { tableData: [], };},//或者created() { this.tableData = [];}
这确保了组件在初始渲染时 tableData 为空，避免了“数据加载中”的误导性提示。
通过以上方法，您可以有效解决 el-table 空数据显示“数据加载中”的问题，并确保用户体验的流畅性。 记住，关键在于精确控制 v-loading 指令的显示时机，并正确初始化 tableData。
以上就是El-table表格数据为空时显示“数据加载中”怎么办？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502115.html
微信扫一扫 
支付宝扫一扫 
