空状态组件 (Empty)

Element UI 的 Empty 组件用于在数据为空或无法加载内容时显示占位提示。它提供了灵活的自定义选项，包括图片、描述文字和底部内容。

提示

Empty 组件官方文档：https://element.eleme.cn/#/zh-CN/component/empty (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-empty> 标签可以直接创建一个空状态提示。可以通过 image、image-size 和 description 属性自定义图片和描述文字。

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

<script>
export default {
  // 此处可以根据需要添加逻辑
};
</script>

• description 属性：用于显示自定义的描述文字，当不指定时，会显示默认的提示文字 "暂无数据"。
• 

2. Empty 属性

Empty 组件提供了几个属性，用于自定义显示内容，如图片、描述文字和图片的大小。

参数	说明	类型	可选值	默认值
image	图片地址	string	—	—
image-size	图片大小（宽度）	number	—	—
description	文本描述	string	—	"暂无数据"

• image 属性：用于设置占位图的路径，支持网络图片地址或本地图片路径。

  <template>
    <el-empty 
      image="https://example.com/image.png" 
      description="找不到您要的内容">
    </el-empty>
  </template>
  

• image-size 属性：用于自定义图片的宽度，单位为像素。可以通过此属性调整图片的大小以适应不同的布局需求。

  <template>
    <el-empty 
      image="https://example.com/image.png" 
      image-size="200" 
      description="暂无数据">
    </el-empty>
  </template>
  

• description 属性：用于设置显示的文本描述，默认描述为 "暂无数据"。

  <template>
    <el-empty 
      description="找不到数据">
    </el-empty>
  </template>
  

3. Empty 插槽

Empty 组件提供了以下几个插槽，用于自定义内容：

插槽名	说明
default	自定义底部内容
image	自定义图片
description	自定义描述文字

• default 插槽：用于在组件底部插入自定义内容，例如操作按钮。

  <template>
    <el-empty description="暂无数据">
      <el-button type="primary">刷新</el-button>
    </el-empty>
  </template>
  

• image 插槽：用于自定义显示的图片，插槽内容将替代 image 属性。

  <template>
    <el-empty description="暂无数据">
      <template #image>
        <img src="https://example.com/custom-image.png" alt="Custom Image">
      </template>
    </el-empty>
  </template>
  

• description 插槽：用于自定义描述文字，插槽内容将替代 description 属性。

  <template>
    <el-empty>
      <template #description>
        <span>没有找到相关数据，请稍后重试</span>
      </template>
    </el-empty>
  </template>
  

4. 常用示例

自定义图片和描述

通过设置 image 和 description 属性自定义占位图片和描述文字。

<template>
  <el-empty 
    image="https://example.com/no-data.png" 
    description="暂无内容显示">
  </el-empty>
</template>

• 自定义图片：图片地址通过 image 属性指定，展示替代图片。
• 

自定义图片大小

通过 image-size 属性调整图片的大小，使其适应不同的布局需求。

<template>
  <el-empty 
    image="https://example.com/no-data.png" 
    image-size="150" 
    description="没有找到相关内容">
  </el-empty>
</template>

• 图片大小控制：使用 image-size 属性设置图片宽度，使其在页面上显示得更合适。
• 

插槽自定义内容

通过 default 插槽自定义组件底部的内容，例如增加一个按钮以便用户操作。

<template>
  <el-empty description="没有内容">
    <el-button type="primary" @click="handleRefresh">刷新页面</el-button>
  </el-empty>
</template>

<script>
export default {
  methods: {
    handleRefresh() {
      // 自定义刷新逻辑
      this.$message('页面已刷新');
    }
  }
};
</script>

• 自定义底部内容：通过 default 插槽添加操作按钮，让组件更加实用。
• 

完全自定义内容

通过 image 和 description 插槽完全自定义显示的图片和描述内容。

<template>
  <el-empty>
    <template #image>
      <img src="https://example.com/empty-state.png" alt="自定义图片">
    </template>
    <template #description>
      <span>这里什么都没有，请稍后再试。</span>
    </template>
    <el-button type="primary">重试</el-button>
  </el-empty>
</template>

• 完全自定义：通过 image 和 description 插槽替换默认的图片和文本描述，提供更灵活的定制能力。
• 

总结

• 灵活的属性配置：通过 image、image-size 和 description 属性，用户可以方便地定制组件的显示内容。
• 插槽支持：提供多个插槽，允许开发者自由定制显示的图片、描述和底部内容，使组件更加灵活。
• 适用场景广泛：Empty 组件适用于任何数据为空的场景，通过简单的设置即可提升用户体验。

5. 仿B站404页面

<template>
  <div class="not-found">
    <el-card class="card" shadow="hover">
      <div class="sign">
        <p>肥肠抱歉，你要找的页面不见了</p>
      </div>
    </el-card>
    <div class="additional-content">
      <el-button type="primary" @click="goBack">返回上一页</el-button>
      <!-- <el-button type="text" @click="goHome">回到首页</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goHome() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
.not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
  padding: 20px;
}

.card {
  width: 600px;
  /* 增加宽度 */
  height: 350px;
  /* 增加高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  /* 增加底部间距 */
  transition: transform 0.3s ease;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.card:hover .sign {
  transform: scale(1.1);
}

.sign {
  width: 350px;
  /* 增加宽度 */
  height: 100px;
  /* 增加高度 */
  background-color: #e6f7ff;
  color: #409eff;
  font-size: 22px;
  /* 增加字体大小 */
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #409eff;
  border-radius: 8px;
  position: relative;
  text-align: center;
  transition: transform 0.3s ease;
}

.sign::before,
.sign::after {
  content: "";
  width: 12px;
  /* 增加宽度 */
  height: 60px;
  /* 增加高度 */
  background-color: #409eff;
  position: absolute;
  top: -60px;
  /* 调整位置 */
}

.sign::before {
  left: 60px;
}

.sign::after {
  right: 60px;
}

.sign p {
  margin: 0;
  transform: rotate(-5deg);
}

.additional-content {
  display: flex;
  gap: 20px;
  /* 增加按钮间距 */
}

.el-button {
  padding: 15px 30px;
  /* 增加按钮尺寸 */
  border-radius: 8px;
  /* 调整按钮圆角 */
  font-size: 16px;
  /* 增加字体大小 */
}

.el-button.text {
  color: #409eff;
}

.el-button.text:hover {
  color: #66b1ff;
}
</style>