El-table初始化为空数组却显示长时间加载的问题分析与解决
在使用Element UI的El-table组件开发表格功能时，很多开发者会遇到一个常见问题：明明已经将表格的数据源初始化为空数组，页面却仍然显示长时间加载的状态，无法快速进入空数据展示逻辑。本文将从问题原因出发，给出对应的解决方案。
问题现象描述
假设我们有以下典型的El-table使用场景：在组件初始化阶段，将表格绑定的数据源tableData设置为空数组[]，同时开启了表格的加载状态控制loading。此时页面没有拉取实际数据，但表格区域会一直显示加载动画，不会切换到空数据提示的状态，持续时间可能长达数秒甚至更久，影响用户体验。
常见原因分析
加载状态控制逻辑错误：很多开发者会在初始化时将loading设置为true，之后忘记在没有异步请求的场景下将其重置为false，导致表格一直认为处于加载中状态。
表格的默认加载配置冲突：如果开启了El-table的某些自动加载相关的配置，或者和全局的加载拦截器联动，即使没有主动发起请求，也可能触发加载状态。
数据初始化时机问题：如果在表格渲染完成之后才设置tableData为空数组，可能存在短暂的加载状态延迟，但这种情况通常不会长时间持续，更多还是和loading状态绑定有关。
解决方案
方案一：修正加载状态的控制逻辑
如果表格不需要发起异步请求加载数据，只是初始化为空数组，那么不需要开启加载状态，直接在初始化时将loading设为false即可。以下是示例代码：
<template>
<div>
<el-table
:data="tableData"
:loading="loading"
style="width: 100%">
<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>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 初始化为空数组
loading: false // 直接设置为false，不需要开启加载状态
}
}
}
</script>方案二：如果存在异步场景，正确重置加载状态
如果表格确实需要在初始化时拉取数据，即使第一次请求返回空数组，也需要在请求完成后正确关闭加载状态。以下是包含异步请求的示例：
export default {
data() {
return {
tableData: [],
loading: false
}
},
mounted() {
this.fetchTableData()
},
methods: {
async fetchTableData() {
this.loading = true // 发起请求前开启加载
try {
// 模拟异步请求，实际项目中替换为真实的接口调用
// 接口地址示例：https://www.ipipp.com/api/getTableData
const res = await this.$http.get('https://www.ipipp.com/api/getTableData')
this.tableData = res.data || [] // 即使返回空，也赋值空数组
} catch (error) {
console.error('请求表格数据失败', error)
this.tableData = [] // 请求失败时也设置为空数组
} finally {
this.loading = false // 无论请求成功失败，都关闭加载状态
}
}
}
}方案三：避免全局加载拦截器的误触发
如果项目中使用了全局的请求拦截器统一控制loading状态，需要排查拦截器的逻辑，避免在没有请求的情况下修改表格的loading值。可以在拦截器中增加判断，仅针对表格相关的请求修改对应的加载状态，示例逻辑如下：
// 请求拦截器示例
const service = axios.create()
service.interceptors.request.use(
config => {
// 仅当请求的是表格数据接口时，才设置对应的loading为true
// 接口地址示例：https://www.ipipp.com/api/getTableData
if (config.url === 'https://www.ipipp.com/api/getTableData') {
// 这里可以通过事件总线或者状态管理工具修改表格的loading状态
// 避免全局无差别开启loading
}
return config
},
error => {
return Promise.reject(error)
}
)效果验证
按照上述方案修改代码后，初始化tableData为空数组时，表格会直接显示空数据提示（如果配置了empty-text属性），或者显示无数据的表格结构，不会再出现长时间加载的情况。如果需要自定义空数据提示内容，可以在El-table上添加empty-text属性，例如：
<el-table :data="tableData" :loading="loading" empty-text="暂无数据" style="width: 100%"> <!-- 列配置 --> </el-table>
只要正确控制loading状态和表格数据源的赋值逻辑，就可以彻底解决El-table初始化为空数组却长时间加载的问题，提升页面的交互体验。