El-table表格数据为空时显示“数据加载中”的实现方案
在使用Element UI的el-table组件开发后台管理系统表格功能时，经常会遇到这样的场景：表格初始状态数据为空，此时需要提示用户“数据加载中”，而不是显示空白区域；当数据加载完成后再正常渲染表格内容。本文将介绍两种常用的实现方案，帮助开发者快速解决该问题。
方案一：使用empty插槽自定义空状态内容
el-table组件提供了empty插槽，用于自定义表格数据为空时的展示内容。我们可以结合数据加载状态，动态切换插槽内的显示内容。
实现步骤
定义表格数据数组
tableData和加载状态标识loading在
el-table中使用empty插槽，根据loading状态判断显示内容数据请求完成后更新
tableData和loading状态
代码示例
<template>
<div class="table-container">
<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 v-if="loading" class="loading-tip">
数据加载中...
</div>
<div v-else class="empty-tip">
暂无数据
</div>
</template>
</el-table>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { getTableData } from './api'; // 假设的数据请求方法
export default {
setup() {
const tableData = ref([]);
const loading = ref(false);
const fetchData = async () => {
loading.value = true;
try {
const res = await getTableData();
tableData.value = res.data || [];
} catch (err) {
console.error('数据请求失败', err);
tableData.value = [];
} finally {
loading.value = false;
}
};
onMounted(() => {
fetchData();
});
return {
tableData,
loading
};
}
};
</script>
<style scoped>
.loading-tip {
color: #909399;
font-size: 14px;
padding: 40px 0;
}
.empty-tip {
color: #909399;
font-size: 14px;
padding: 40px 0;
}
</style>方案二：使用el-table的loading属性全局加载
如果希望“数据加载中”的提示覆盖整个表格区域，而不是仅显示在表格内容区域，可以使用el-table的loading属性，配合el-loading指令实现全表格加载提示。
实现步骤
给
el-table添加:loading="loading"属性通过
element-loading-text属性设置加载提示文本为“数据加载中”数据请求时设置
loading为true，请求完成后设置为false
代码示例
<template>
<div class="table-container">
<el-table
:data="tableData"
:loading="loading"
element-loading-text="数据加载中"
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>
import { ref, onMounted } from 'vue';
import { getTableData } from './api';
export default {
setup() {
const tableData = ref([]);
const loading = ref(false);
const fetchData = async () => {
loading.value = true;
try {
const res = await getTableData();
tableData.value = res.data || [];
} catch (err) {
console.error('数据请求失败', err);
tableData.value = [];
} finally {
loading.value = false;
}
};
onMounted(() => {
fetchData();
});
return {
tableData,
loading
};
}
};
</script>两种方案对比
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| empty插槽方案 | 希望加载提示仅在表格内容区域显示，且需要区分“加载中”和“无数据”两种空状态 | 自定义程度高，可灵活控制不同空状态的展示内容 | 仅显示在表格内容区域，若表格高度固定且内容区域较小，提示可能不够明显 |
| loading属性方案 | 希望加载提示覆盖整个表格区域，用户感知更明显 | 实现简单，无需额外自定义插槽，提示覆盖全表格，视觉优先级高 | 仅能显示加载状态，无法区分“加载中”和“无数据”两种空状态，数据为空且加载完成后会直接显示默认空提示 |
注意事项
两种方案都需要正确管理
loading状态，确保数据请求完成（无论成功或失败）后都将loading设为false，避免出现加载状态一直显示的问题如果表格有固定的高度设置，使用empty插槽方案时需注意空状态内容的垂直居中样式，避免提示内容显示位置异常
若需要兼容更早版本的Element UI，需注意插槽语法的差异，旧版本可能使用
slot="empty"的写法而非#empty
开发者可以根据实际业务场景选择合适的方案，若需要同时区分加载中和无数据两种状态，推荐使用第一种empty插槽方案；若仅需要全表格加载提示，第二种方案实现成本更低。