ElementPlus 数据展示组件
ElementPlus 数据展示组件
简介
数据展示是通过图形、图标、表格等直观形式展示抽象的数据信息。
Element Plus 提供了多种数据展示组件，以满足不同场景的需求。
其中，常用的包括表格（Tabel）、头像（Avatar）以及卡片（Card）等。
Table 表格
表格是用于展示结构类似的数据，并提供了排序、筛选等功能。
在Element Plus 中，使用 el-table 组件来展示数据，通过注入一个 data 对象来提供数据源。
基本使用
在表格中，使用 el-table-column 元素来定义每一列的显示。以下是一些重要的属性：
prop属性用于指定该列对应数据对象中的键名。label属性用于定义该列的标题名称。width属性可定义列的宽度。
<template>
<!-- 使用表格组件 -->
<el-table :data="tableData" style="width: 800px">
<el-table-column prop="num" label="Num" width="180" />
<el-table-column prop="case" label="Case" width="180" />
<el-table-column prop="priority" label="Priority" />
<el-table-column label="Operations">
<!-- 使用具名插槽为default设置插槽内容 -->
<template #default="scope">
<!-- 利用作用域对象将当前行索引和当前行对象作为参数传递给响应函数 -->
<el-button size="small" type="info" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script setup>
// 表格的数据
const tableData = [
{
num: '01',
case: '测试用例1',
priority: 'P0',
},
{
num: '02',
case: '测试用例2',
priority: 'P1',
},
{
num: '03',
case: '测试用例3',
priority: 'P3',
},
]
// 响应函数
const handleEdit = (index, row) => {
console.log(index, row)
}
const handleDelete = (index, row) => {
console.log(index, row)
}
</script>
API
组件属性及事件可查看官方文档。
Avatar 头像
Avatar 组件适用于展示人物或对象的头像，它支持使用图标、图片或文字作为头像的展示方式。
此外，Avatar 组件还提供了在图片加载失败时的回退行为，保证了用户在任何情况下都能正常获取头像信息。
基本使用
使用 el-avatar 组件展示头像。默认为头像以圆形展示。
<template>
<!-- 基础用法 -->
<div>
<el-avatar :size="100" :src="state.circleUrl" />
</div>
<div v-for="size in state.sizeList" :key="size">
<el-avatar :size="size" :src="state.circleUrl" />
</div>
<!-- 圆角距形头像 -->
<div>
<el-avatar shape="square" :size="50" :src="state.squareUrl" />
</div>
<div v-for="size in state.sizeList" :key="size">
<el-avatar shape="square" :size="size" :src="state.squareUrl" />
</div>
<!-- 文字头像 -->
<div>
<el-avatar> user </el-avatar>
</div>
<!-- 图片头像 -->
<div>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
</div>
<!-- 图标头像 -->
<div>
<el-avatar :icon="UserFilled" />
</div>
<!-- 回退行为 图片加载失败时的回退行为 -->
<div class="demo-type">
<el-avatar :size="60" src="https://empty" @error="errorHandler">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
</el-avatar>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
const errorHandler = ref(true)
const state = ref({
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
sizeList: ['small', '', 'large'],
})
</script>
API
组件属性及事件可查看官方文档。
Card 卡片
卡片组件是用于集中展示一块信息的元素，组件由 header、 body 和 footer 组成。
header 和 footer 是可选的，其内容取决于一个具名的 slot。
基本使用
<template>
<!-- 简单卡片 -->
<el-col :span="10">
<el-card>
<div v-for="o in 4" :key="o" class="text item">{{ 'List Item' + o }}</div>
</el-card>
</el-col>
<br>
<!-- 完整卡片 -->
<el-col :span="10">
<el-card>
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button type="info">Operation</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
<template #footer>Footer content</template>
</el-card>
</el-col>
<br>
<!-- 图文卡片 -->
<el-col :span="10">
<el-card :body-style="{ padding: '0px' }">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
class="image" />
<div style="padding: 14px">
<span>Yummy hamburger</span>
<div class="box">
<time class="time">{{ currentDate }}</time>
<el-button type="info" >Operating</el-button>
</div>
</div>
</el-card>
</el-col>
<br>
<!-- 卡片阴影效果 shadow属性值为 always hover never-->
<el-row :gutter="12">
<el-col :span="8">
<el-card shadow="always"> Always </el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover"> Hover </el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never"> Never </el-card>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
const currentDate = ref(new Date())
</script>
<style scoped>
.text {
font-size: 14px;
}
.item {
padding: 18px 0;
}
.button{
padding: 0;
min-height: auto;
}
.time {
font-size: 12px;
color: #999;
}
.box {
margin-top: 13px;
line-height: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.image {
width: 100%;
display: block;
}
</style>
API
组件属性及事件可查看官方文档。
总结
el-table表格组件用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。el-avatar头像组件可以用来代表人物或对象， 支持使用图片、图标或者文字作为头像。el-card卡片组件将信息聚合在卡片容器中展示。