el-empty详解

el-empty 是 Element Plus 框架中的一个空状态组件，用于在没有数据时展示友好的提示信息。它可以自定义图标、描述文字和额外的操作按钮。

一。 el-empty 属性详解

1. description:

   • 类型: String
   • 用途: 空状态的描述文字。

2. image:

   • 类型: String
   • 用途: 空状态的图标图片地址。

3. image-size:

   • 类型: Number
   • 用途: 图标图片的大小。

4. direction:

   • 类型: String
   • 用途: 内容布局方向，可选值为 vertical、horizontal。
   • 默认值: vertical

二。 el-empty 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义空状态的内容。

2. image:

   • 插槽名称: image
   • 用途: 自定义图标图片的内容。

3. description:

   • 插槽名称: description
   • 用途: 自定义描述文字的内容。

三。示例代码

<template>
  <div>
    <h2>Empty 示例</h2>

    <!-- 基本用法 -->
    <el-empty description="暂无数据"></el-empty>

    <!-- 自定义图标图片 -->
    <el-empty :image="customImage" description="暂无数据"></el-empty>

    <!-- 自定义图标图片大小 -->
    <el-empty :image="customImage" :image-size="200" description="暂无数据"></el-empty>

    <!-- 自定义描述文字 -->
    <el-empty :image="customImage" :image-size="200">
      <template #description>
        <p>这里什么都没有哦~</p>
      </template>
    </el-empty>

    <!-- 添加按钮 -->
    <el-empty :image="customImage" :image-size="200" description="暂无数据">
      <el-button type="primary">点击刷新</el-button>
    </el-empty>

    <!-- 水平布局 -->
    <el-empty :image="customImage" :image-size="200" direction="horizontal" description="暂无数据">
      <el-button type="primary">点击刷新</el-button>
    </el-empty>
  </div>
</template>

四。 代码解释

1. 基本用法:

   • 使用 el-empty 组件并设置 description 属性。

   • <el-empty description="暂无数据"></el-empty>
     

2. 自定义图标图片:

   • 使用 image 属性设置自定义图标图片。

   • <el-empty :image="customImage" description="暂无数据"></el-empty>
     

3. 自定义图标图片大小:

   • 使用 image-size 属性设置图标图片的大小。

   • <el-empty :image="customImage" :image-size="200" description="暂无数据"></el-empty>
     

4. 自定义描述文字:

   • 使用 description 插槽自定义描述文字。

   • <el-empty :image="customImage" :image-size="200">
       <template #description>
         <p>这里什么都没有哦~</p>
       </template>
     </el-empty>
     

5. 添加按钮:

   • 在 el-empty 组件内部添加按钮。

   • <el-empty :image="customImage" :image-size="200" description="暂无数据">
       <el-button type="primary">点击刷新</el-button>
     </el-empty>
     

6. 水平布局:

   • 使用 direction 属性设置内容布局方向为水平。

   • <el-empty :image="customImage" :image-size="200" direction="horizontal" description="暂无数据">
       <el-button type="primary">点击刷新</el-button>
     </el-empty>