el-table空数组显示“数据加载中”的解决方案
在使用Element UI的el-table组件时，很多开发者会遇到数据初始化为空数组时，表格直接显示“暂无数据”的提示，但实际场景中可能需要先展示“数据加载中”的状态，等待异步请求完成后再切换显示内容。本文将介绍几种可行的实现方案，帮助开发者解决该问题。
问题场景说明
通常我们在组件初始化时，会先定义表格绑定的数据源为一个空数组，然后在created或mounted生命周期中发起异步请求获取表格数据。此时el-table在数据为空数组时，默认会显示“暂无数据”的提示，而不是我们期望的“数据加载中”状态，导致用户体验不佳。
方案一：通过加载状态变量控制显示
这是最常用也最灵活的实现方式，通过增加一个表示数据加载状态的变量，结合条件渲染来控制表格区域或提示内容的显示。
步骤说明
在data中定义表格数据源tableData和加载状态变量loading，初始时loading设为true
发起异步请求获取数据时，保持loading为true，请求完成后根据结果更新tableData，再将loading设为false
在模板中使用v-if和v-else条件渲染，loading为true时显示“数据加载中”提示，否则渲染el-table
代码示例
<template>
<div class="table-container">
<div v-if="loading" class="loading-tip">数据加载中...</div>
<el-table
v-else
:data="tableData"
border
style="width: 100%"
>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
prop="age"
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: true
}
},
created() {
this.fetchTableData()
},
methods: {
fetchTableData() {
// 模拟异步请求
setTimeout(() => {
// 假设请求成功返回数据
this.tableData = [
{ name: '张三', age: 20, address: '北京市朝阳区' },
{ name: '李四', age: 22, address: '上海市浦东新区' }
]
this.loading = false
}, 1500)
}
}
}
</script>
<style scoped>
.loading-tip {
text-align: center;
padding: 30px;
color: #909399;
font-size: 14px;
}
</style>方案二：利用el-table的empty插槽自定义空状态
如果希望在表格内部处理空状态，不额外增加外层容器，可以使用el-table提供的empty插槽，根据加载状态自定义空状态的显示内容。
步骤说明
同样在data中定义loading和tableData变量，初始loading为true
使用el-table的empty插槽，在插槽内部根据loading状态判断显示内容：loading为true时显示“数据加载中”，否则显示默认的“暂无数据”
异步请求完成后更新tableData和loading状态即可
代码示例
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%"
>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
></el-table-column>
<template #empty>
<div class="empty-content">
<span v-if="loading">数据加载中...</span>
<span v-else>暂无数据</span>
</div>
</template>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
loading: true
}
},
created() {
this.fetchTableData()
},
methods: {
fetchTableData() {
// 模拟异步请求
setTimeout(() => {
// 请求失败的场景示例，保持tableData为空数组
// this.tableData = []
// 请求成功的场景示例
this.tableData = [
{ name: '王五', age: 25, address: '广州市天河区' }
]
this.loading = false
}, 1500)
}
}
}
</script>
<style scoped>
.empty-content {
padding: 30px;
color: #909399;
font-size: 14px;
}
</style>方案三：结合el-loading指令实现加载遮罩
如果希望保留表格结构，仅在表格区域显示加载遮罩，同时提示“数据加载中”，可以使用Element UI的el-loading指令，在表格容器上添加加载遮罩。
步骤说明
在data中定义loading变量，初始为true
在el-table的外层容器上添加v-loading指令，绑定loading变量，同时可以自定义加载文案
异步请求完成后将loading设为false即可关闭遮罩
代码示例
<template>
<div
v-loading="loading"
element-loading-text="数据加载中..."
style="min-height: 200px;"
>
<el-table
:data="tableData"
border
style="width: 100%"
>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
prop="age"
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: true
}
},
created() {
this.fetchTableData()
},
methods: {
fetchTableData() {
// 模拟异步请求
setTimeout(() => {
this.tableData = [
{ name: '赵六', age: 28, address: '深圳市南山区' }
]
this.loading = false
}, 1500)
}
}
}
</script>方案对比与选择建议
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 方案一：加载状态变量控制显示 | 逻辑清晰，可自定义内容样式灵活，完全掌控显示状态 | 需要额外增加条件渲染的容器，切换时可能有轻微闪烁 | 需要完全自定义加载和空状态的显示内容，对样式要求高的场景 |
| 方案二：empty插槽自定义 | 无需额外外层容器，在表格内部处理，结构更简洁 | 仅能替换表格空状态的内容，无法在表格有数据时显示加载状态 | 仅需要在表格数据为空时区分加载中和无数据的场景 |
| 方案三：el-loading指令遮罩 | 保留表格原有结构，加载遮罩样式统一，实现简单 | 加载提示样式受el-loading限制，自定义程度较低 | 希望快速实现加载效果，且接受Element UI默认加载样式的场景 |
注意事项
异步请求完成后，无论成功失败都需要将loading状态设为false，避免出现一直显示“数据加载中”的问题
如果请求失败且不需要重试，建议将loading设为false后，保持tableData为空数组，此时可根据业务需求显示“加载失败”或“暂无数据”的提示
使用empty插槽时，需要注意el-table的empty插槽在Vue2和Vue3中的写法略有差异，上述示例为Vue3的写法，Vue2中需要使用
slot="empty"的写法
以上就是解决el-table空数组显示“数据加载中”的几种常用方案，开发者可以根据实际业务需求选择合适的实现方式，提升用户的使用体验。