Empty ​

Sugerencias para estados vacíos.

Uso básico ​

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

Imagen personalizada ​

Utilice la propiedad image para establecer la URL de la imagen.

No Data

TS

JS

vue

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

Código oculto

Tamaño de la imagen ​

Use la propiedad image-size para controlar el tamaño de la imagen.

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

Contenido personalizado de la parte inferior ​

Utilice el slot por defecto para insertar contenido en la parte inferior.

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

Estilos personalizados ​

Ahora puede establecer un estilo personalizado para el componente empty. Use el lenguaje css/scss para cambiar el color global o local. Establecemos algunas variables de color globales: --el-empty-fill-color-0, --el-empty-fill-color-1, --el-empty-fill-color-2, ......, --el-empty-fill-color-9. Usted puede hacer algo así: :root { --el-empty-fill-color-0: red; --el-empty-fill-color-1: blue; }. Pero normalmente, si quieres cambiar de estilo, necesitas cambiar todo el color, porque estos colores son una combinación.

Variables por defecto ​

API ​

Atributos ​

Slots ​

Fuente ​

Componentes • Style • Documentación

Contribuidores ​