🚀前言

在现代 web 应用中，数据的有效展示与管理是用户体验的核心要素之一。无论是展示复杂的数据表格、还是进行数据的选择和筛选，数据承载相关组件都扮演着至关重要的角色。Element Plus 作为一款为 Vue 3 设计的优秀 UI 组件库，提供了一系列强大而灵活的数据承载组件，如表格（Table）、树形控件（Tree）、分页（Pagination）等，帮助开发者轻松构建功能丰富且用户友好的数据展示界面。

本篇文章将深入探讨 Element Plus 中的数据承载相关组件，结合实际示例，详细讲解它们的功能、用法及配置选项。我们将通过具体的代码示例，展示如何使用表格组件展示复杂的数据列表，包括排序、筛选和编辑功能；如何利用树形控件展示层级结构的数据；以及如何使用分页组件优化大量数据的显示效果。

🚀一、Element Plus数据承载相关组件示例

<script setup>
import {ref} from  'vue'
const tableData =  [
  {
    name: "小王",
    age: 29,
    subject: "Java",
  },
  {
    name: "小李",
    age: 30,
    subject: "C++",
  },
  {
    name: "小张",
    age: 28,
    subject: "JavaScript",
  },
]

const drawer = ref(false)

</script>

<template>
<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="subject" label="科目"></el-table-column>
</el-table>
<el-menu mode="horizontal">
  <el-menu-item index="1">首页</el-menu-item>
  <el-sub-menu index="2">
    <template #title>广场</template>
    <el-menu-item index="2-1">音乐</el-menu-item>
    <el-menu-item index="2-2">视频</el-menu-item>
    <el-menu-item index="2-3">游戏</el-menu-item>
    <el-sub-menu index="2-4">
      <template #title>体育</template>
      <el-menu-item index="2-4-1">篮球</el-menu-item>
      <el-menu-item index="2-4-2">足球</el-menu-item>
      <el-menu-item index="2-4-3">排球</el-menu-item>
    </el-sub-menu>
  </el-sub-menu>
  <el-menu-item index="3" :disabled="true">个人中心</el-menu-item>
  <el-menu-item index="4">设置</el-menu-item>
</el-menu>
<el-tabs type="border-card">
  <el-tab-pane label="页面1" name="1">页面1</el-tab-pane>
  <el-tab-pane label="页面2" name="2">页面2</el-tab-pane>
  <el-tab-pane label="页面3" name="3">页面3</el-tab-pane>
  <el-tab-pane label="页面4" name="4">页面4</el-tab-pane>
</el-tabs>
<div style="margin:300px">
  <el-button @click="drawer = true" type="primary">
    点我打开抽屉
  </el-button>
</div>
<el-drawer
  title="抽屉面板的标题"
  v-model="drawer"
  direction="ltr">
  抽屉面板的内容
</el-drawer>

<el-container>
  <el-header height="80px" style="background-color:gray">Header</el-header>
  <el-container>
    <el-aside width="200px" style="background-color:red">Aside</el-aside>
    <el-container>
      <el-main>
          <div style="height:300px;background-color:#f1f1f1">内容</div>
      </el-main>
      <el-footer height="80px" style="background-color:gray">Footer</el-footer>
    </el-container>
  </el-container>
</el-container>
</template>

🔎1. <script setup> 部分

import { ref } from 'vue';

const tableData = [
  { name: "小王", age: 29, subject: "Java" },
  { name: "小李", age: 30, subject: "C++" },
  { name: "小张", age: 28, subject: "JavaScript" },
];

const drawer = ref(false);

• import { ref } from 'vue';：从 Vue 3 中引入 ref 函数，用于创建响应式数据。

• const tableData = [...]：定义了一个名为 tableData 的数组，包含了几条数据，每条数据代表一个人的信息（姓名、年龄、科目）。这个数据将绑定到表格（el-table）中，用于显示。

• const drawer = ref(false);：定义了一个响应式变量 drawer，初始值为 false，用于控制 抽屉面板 的显示和隐藏。通过修改 drawer 的值，抽屉面板会展示或隐藏。

🔎2. <template> 部分

🦋2.1 表格（el-table）

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="subject" label="科目"></el-table-column>
</el-table>

• <el-table :data="tableData">：使用 Element Plus 的 el-table 组件来展示数据，data 属性绑定了 tableData 数组。这意味着表格会根据 tableData 中的数据自动渲染出相应的行。

• <el-table-column prop="name" label="姓名"></el-table-column>：el-table-column 用来定义表格的列，每个列通过 prop 指定它绑定的数据字段（如 name、age 和 subject），通过 label 属性设置列头的名称。

🦋2.2 菜单（el-menu 和 el-sub-menu）

<el-menu mode="horizontal">
  <el-menu-item index="1">首页</el-menu-item>
  <el-sub-menu index="2">
    <template #title>广场</template>
    <el-menu-item index="2-1">音乐</el-menu-item>
    <el-menu-item index="2-2">视频</el-menu-item>
    <el-menu-item index="2-3">游戏</el-menu-item>
    <el-sub-menu index="2-4">
      <template #title>体育</template>
      <el-menu-item index="2-4-1">篮球</el-menu-item>
      <el-menu-item index="2-4-2">足球</el-menu-item>
      <el-menu-item index="2-4-3">排球</el-menu-item>
    </el-sub-menu>
  </el-sub-menu>
  <el-menu-item index="3" :disabled="true">个人中心</el-menu-item>
  <el-menu-item index="4">设置</el-menu-item>
</el-menu>

• <el-menu mode="horizontal">：使用 Element Plus 的 el-menu 组件创建一个水平菜单（通过 mode="horizontal" 设置）。菜单项包含了多个 el-menu-item 和 el-sub-menu 组件，用于展示不同的菜单内容。

• <el-sub-menu>：用于创建一个子菜单，可以包含多个子项（如 音乐、视频、游戏 等）。并且通过 <template #title> 来定义子菜单的标题。<el-sub-menu> 内可以嵌套更多的子菜单，如 体育 子菜单，包含 篮球、足球、排球 等项。

• :disabled="true"：禁用某个菜单项（如 个人中心），不允许用户点击。

🦋2.3 标签页（el-tabs 和 el-tab-pane）

<el-tabs type="border-card">
  <el-tab-pane label="页面1" name="1">页面1</el-tab-pane>
  <el-tab-pane label="页面2" name="2">页面2</el-tab-pane>
  <el-tab-pane label="页面3" name="3">页面3</el-tab-pane>
  <el-tab-pane label="页面4" name="4">页面4</el-tab-pane>
</el-tabs>

• <el-tabs type="border-card">：创建了一个标签页组件，type="border-card" 设置标签页的样式为边框卡片形式。

• <el-tab-pane>：每个标签页通过 <el-tab-pane> 定义，label 属性表示标签页的名称，name 用于唯一标识每个标签页。标签页的内容（如 页面1、页面2 等）展示在每个 el-tab-pane 中。

🦋2.4 抽屉（el-drawer）

<div style="margin:300px">
  <el-button @click="drawer = true" type="primary">点我打开抽屉</el-button>
</div>

<el-drawer title="抽屉面板的标题" v-model="drawer" direction="ltr">
  抽屉面板的内容
</el-drawer>

• <el-button @click="drawer = true" type="primary">：一个按钮，点击时会设置 drawer 为 true，这会触发 抽屉面板 显示出来。

• <el-drawer v-model="drawer" direction="ltr">：el-drawer 组件用于创建抽屉面板，v-model="drawer" 使得抽屉的开关和 drawer 变量双向绑定，direction="ltr" 表示抽屉从左到右滑出。抽屉的标题和内容通过 title 和子内容进行设置。

🦋2.5 布局（el-container、el-header、el-aside、el-main、el-footer）

<el-container>
  <el-header height="80px" style="background-color:gray">Header</el-header>
  <el-container>
    <el-aside width="200px" style="background-color:red">Aside</el-aside>
    <el-container>
      <el-main>
        <div style="height:300px;background-color:#f1f1f1">内容</div>
      </el-main>
      <el-footer height="80px" style="background-color:gray">Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

• <el-container>：容器组件，用于创建一个布局结构。一个 el-container 可以包含 el-header（头部）、el-aside（侧边栏）、el-main（主内容区域）和 el-footer（底部）。

• <el-header>、<el-aside>、<el-main>、<el-footer>：分别代表页面的头部、侧边栏、主内容区域和底部。

• style="background-color:gray"：通过内联样式设置各个区域的背景颜色，便于区分。

🔎3.总结

• 表格（el-table）：展示了一些用户数据（姓名、年龄、科目）。
• 菜单（el-menu）：提供了一个带有子菜单的横向菜单，支持多级菜单和禁用项。
• 标签页（el-tabs）：展示了一个带有多个标签页的内容，可以在页面间切换。
• 抽屉（el-drawer）：通过按钮控制抽屉的显示，提供额外的信息或功能。
• 布局（el-container）：创建了一个包含头部、侧边栏、主内容区和底部的布局结构。

整个页面使用了 Element Plus 的各种组件来构建一个现代化的 UI，适用于后台管理系统或控制面板页面。通过响应式数据和事件绑定，用户可以交互式地操作表格、菜单、标签页和抽屉。