Empty ​

Placeholder hints for empty states.

Basic usage ​

<template>
  <el-empty description="description" />
</template>

Custom image ​

Use image prop to set image URL.

No Data

vue

<template>
  <el-empty
    image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
  />
</template>

Hide source

Image size ​

Use image-size prop to control image size.

<template>
  <el-empty :image-size="200" />
</template>

Bottom content ​

Use the default slot to insert content at the bottom.

<template>
  <el-empty>
    <el-button type="primary">Button</el-button>
  </el-empty>
</template>

Custom styles ​

Now you can set custom style for empty component. Use css/scss language to change the global or local color. We set some global color variables: --el-empty-fill-color-0, --el-empty-fill-color-1, --el-empty-fill-color-2, ......, --el-empty-fill-color-9. You can use like: :root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }. But usually, if you want to change style, you need to change all color, because these colors are a combination.

Default Variables ​

API ​

Attributes ​

Slots ​

Source ​

Component • Style • Docs

Contributors ​