Table 表格 - 加载状态

通过设置 loading 属性在表格上显示加载遮罩，适用于异步数据请求场景。

基础用法

通过设置 loading 属性可以使用自带的加载效果。

显示 Loading

序号	Name	Sex	Age	Address

1	Test1	Man	28	test abc
2	Test2	Women	22	Guangzhou
3	Test3	Man	32	Shanghai
4	Test4	Women	23	test abc
5	Test5	Women	30	Shanghai

正在加载...

基础 Loading

修改加载中图标及文字

通过对象形式传入 loading，可自定义加载文字。设置 { visible: true, text: '...' } 即可显示自定义文字。

序号	Name	Sex	Age	Address

暂无数据

正在拼命加载中...

自定义文字

自定义加载中插槽

通过 #loading 插槽可以完全自定义加载中的展示内容。

序号	Name	Sex	Age	Address

1	Test1	Man	28	test abc
2	Test2	Women	22	Guangzhou

自定义加载动画...

自定义插槽

异步请求

实际业务中，loading 通常与异步数据请求配合使用。请求开始时设为 true，请求结束后设为 false。

序号	姓名	部门	职位	薪资

暂无数据

异步请求 Loading

API

Loading 属性

loading 属性支持 boolean 或对象两种传入方式。

用法	说明	类型
:loading="true"	显示默认加载效果	boolean
:loading="{ visible, text }"	对象形式，可配置文字等	TableLoadingConfig

TableLoadingConfig

属性	说明	类型	默认值
visible	是否显示加载状态	boolean	false
text	加载提示文字	string	—
icon	自定义加载图标组件	Component | string	—
background	遮罩背景色	string	rgba(255, 255, 255, 0.8)
render	完全自定义渲染函数	() => VNode	—

插槽

插槽名	说明
loading	自定义加载中的展示内容，优先级高于 loading 对象配置

注意事项

1. 简写用法：:loading="true" 等价于 :loading="{ visible: true }"。
2. 插槽优先：当同时使用 #loading 插槽和 loading 对象配置时，插槽的内容优先展示。
3. 遮罩层级：加载遮罩的 z-index 为 20，确保覆盖在表格内容之上。
4. 配合请求：建议在发起异步请求前设置 loading = true，在请求完成（成功或失败）后设置 loading = false。