Element Plus入门-第五篇：数据展示组件初用

Element Plus入门-第五篇：数据展示组件初用

在构建前端应用时，数据展示是必不可少的功能模块。Element Plus提供了丰富的数据展示组件，其中Table组件用于结构化数据的呈现，Card组件则适用于展示独立的内容块。本文将介绍Table组件的数据绑定与列头设置，以及Card组件的内容填充与样式调整，帮助你快速掌握这两个组件的基础用法。

一、Table组件数据绑定与列头设置

（一）Table组件数据绑定

Table组件通过data属性绑定要展示的数据数组，数组中的每个对象对应表格的一行数据。假设我们有一个展示用户信息的表格，数据包含姓名、年龄和邮箱，示例代码如下：

<template>
  <div>
    <el-table :data="userData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </div>
</t