Element UI el-table 数据加载卡住问题及解决方案
在使用 Element UI 的 el-table 组件时，如果初始 tableData 数据为空数组，并且使用了 v-loading 指令，界面可能会长时间显示加载状态。这并非 el-table 组件本身的问题，而是 loading 变量未能及时更新导致的。
问题通常出现在 v-loading 指令和数据加载异步操作的配合上。当数据加载尚未完成时，loading 变量保持为 true，导致加载动画持续显示。
例如：
<el-table :data="tableData" v-loading="isLoading"> ... </el-table>
export default {
data() {
return {
tableData: [],
isLoading: true // 初始状态为加载中
};
},
mounted() {
this.fetchData().then(() => {
this.isLoading = false; // 数据加载完成后，将 isLoading 设置为 false
});
},
methods: {
fetchData() {
// 你的数据获取逻辑
return new Promise((resolve) => {
setTimeout(() => {
this.tableData = [/* 你的数据 */];
resolve();
}, 1000); // 模拟数据加载延时
});
}
}
};解决方案：
关键在于确保在数据加载完成后，及时将 loading 变量（此处为 isLoading）设置为 false。 在异步数据请求的 then 方法中进行此操作，可以有效解决 el-table 长时间显示加载状态的问题。 如果你的数据请求失败，也应该设置 isLoading 为 false，并处理错误信息。 确保你的 fetchData 方法正确处理了异步操作，并返回一个 Promise 对象。
以上就是El-table数据加载长时间显示，如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
