Table - Loading State

Display a loading overlay on the table by setting the loading property, suitable for async data request scenarios.

Basic Usage

Set the loading property to use the built-in loading effect.

Show Loading

Index	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...

Basic Loading

Custom Loading Icon and Text

Pass an object to loading to customize loading text. Set { visible: true, text: '...' } to display custom text.

Index	Name	Sex	Age	Address

No Data

Loading hard...

Custom Text

Custom Loading Slot

Use the #loading slot to fully customize the loading display content.

Index	Name	Sex	Age	Address

1	Test1	Man	28	test abc
2	Test2	Women	22	Guangzhou

Custom loading animation...

Custom Slot

Async Request

In real-world scenarios, loading is typically used with async data requests. Set to true when the request starts, and false when it completes.

Index	Name	Department	Position	Salary

No Data

Async Request Loading

API

Loading Properties

The loading property supports both boolean and object forms.

Usage	Description	Type
:loading="true"	Show default loading effect	boolean
:loading="{ visible, text }"	Object form, configurable text etc.	TableLoadingConfig

TableLoadingConfig

Property	Description	Type	Default
visible	Whether to show loading state	boolean	false
text	Loading hint text	string	—
icon	Custom loading icon component	Component | string	—
background	Overlay background color	string	rgba(255, 255, 255, 0.8)
render	Fully custom render function	() => VNode	—

Slots

Slot	Description
loading	Custom loading display content, takes priority over loading object config

Notes

1. Shorthand: :loading="true" is equivalent to :loading="{ visible: true }".
2. Slot Priority: When both #loading slot and loading object config are used, slot content takes priority.
3. Overlay Z-Index: The loading overlay z-index is 20, ensuring it covers the table content.
4. With Requests: It's recommended to set loading = true before initiating async requests, and loading = false after completion (success or failure).