Element Plus

Data 数据展示组件，包括Avater头像、Badge徽章、Calendar日历、Card卡片、Carousel走马灯、Collapse折叠面板、Descriptions描述列表、Empty空状态、Image图片、Infinite Scroll无线滚动、Pagination分页、Progress进度条、Result结果、Skeleton骨架屏、Table表格、Tag标签、Timeline时间线和Tree树形控件以及Virtualized Tree虚拟化树形控件。

Avatar头像，​Avatar 组件可以用来代表人物或对象， 支持使用图片，图标或者文字作为 Avatar。

<el-avatar :size="size" :src="circleUrl"></el-avatar>

Badge徽章，​按钮和图标上的数字或状态标记。

<el-badge :value="12" class="item">
    <el-button>comments</el-button>
  </el-badge>

Calendar日历，​显示日期。

<template>
  <el-calendar v-model="value" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(new Date())
</script>

Card卡片，​将信息聚合在卡片容器中展示。

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
        <el-button class="button" type="text">Operation button</el-button>
      </div>
    </template>
    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
  </el-card>
</template>

Carousel走马灯，​在有限空间内，循环播放同一类型的图片、文字等内容。

<el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

Collapse折叠面板，​通过折叠面板收纳内容区域。

<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </el-collapse-item>
      <el-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </el-collapse-item>
      <el-collapse-item title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </el-collapse-item>
      <el-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

Descriptions描述列表，​列表形式展示多个字段。

<template>
  <el-descriptions title="User Info">
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address"
      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
      Province</el-descriptions-item
    >
  </el-descriptions>
</template>

Image图片，​图片容器，在保留所有原生 img 的特性下，支持懒加载，自定义占位、加载失败等。

<el-image
        style="width: 100px; height: 100px"
        :src="url"
        :fit="fit"
      ></el-image>

Infinite Scroll 无限滚动，​滚动至底部时，加载更多数据。

<template>
  <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

​Pageination分页，当数据量过多时，使用分页分解数据。

<el-pagination layout="prev, pager, next" :total="50"></el-pagination>

Progress进度条，​用于展示操作进度，告知用户当前状态和预期。

<el-progress :percentage="100" status="success" />

Table表格，​用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

Timeline时间线，​可视化地呈现时间流信息。

<template>
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </el-timeline-item>
  </el-timeline>
</template>

Tree树形控件，​用清晰的层级结构展示信息，可展开或折叠。

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</template>