【愚公系列】《循序渐进Vue.js 3.x前端开发实践》050-Element Plus数据承载相关组件示例

愚公搬代码

发布于 2025-06-02 17:55:49

14100

代码可运行

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代 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，适用于后台管理系统或控制面板页面。通过响应式数据和事件绑定，用户可以交互式地操作表格、菜单、标签页和抽屉。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

数据

element

表格

实践

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度