el-Empty 空状态 如何使用？

el-Empty  是 Element UI（饿了么前端团队开发的一套基于Vue.js的组件库）中的一个组件，它用于在没有内容时展示一个空状态的提示。

el-empty 支持以下属性：

• image: 空状态图片 url
• description: 空状态描述文字
• imageSize: 空状态图片大小，默认为 200px
• className: 自定义 class 名称

<el-empty
  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
  description="自定义空状态描述文字"
  imageSize="300px"
  className="custom-class-name"
/>

以下是如何使用 el-empty 组件以及一些注意事项的示例：  

1. 在页面中引入 el-empty 组件：

<template>
  <el-empty description="暂无数据" />
</template>
<script>
import { ElEmpty } from 'element-plus';

export default {
  components: { ElEmpty },
};
</script>

2.在组件中使用 el-empty 组件：

<template>
  <div class="content">
    <el-empty v-if="!dataList.length" description="暂无数据" />
    <div v-else v-for="(item, index) in dataList" :key="index">{{ item }}</div>
  </div>
</template>

<script>
import { ElEmpty } from 'element-plus';

export default {
  components: { ElEmpty },
  data() {
    return {
      dataList: [],
    };
  },
};
</script>

 在上面的代码中，如果 dataList 数组为空，则会展示 el-empty 组件，并显示“暂无数据”的描述信息。如果 dataList 数组有数据，则会展示数据列表。

3.在vue文件：

<template>
  <div>
    <!-- 使用 el-empty 组件 -->
    <el-empty :image="emptyImage" description="暂无数据"></el-empty>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 可选：指定空状态的图片
      emptyImage: require('@/assets/empty.png'), // 请替换成实际的图片路径
    };
  },
};
</script>

注意：

• 1.image属性要用动态绑定，即:image="url"
• 2.图片导入要用require("url")