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.

Basic Loading

Custom Loading Icon and Text

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

Custom Text

Custom Loading Slot

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

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.

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