【Element Plus辅助前端开发】

qq_18307045

已于 2022-05-20 18:20:00 修改

阅读量767

点赞数

分类专栏：学习笔记文章标签： vue.js 前端 elementui

于 2022-05-20 18:11:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_18307045/article/details/124886013

版权

本文介绍了基于Vue3.0的前端组件库ElementPlus，详细讲解了Dropdown下拉菜单、NavMenu导航菜单、Table表格和Tabs标签页的使用，并提供了代码示例。通过这些组件，开发者可以快速构建功能丰富的页面。同时，文章还涵盖了安装和引入ElementPlus的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element Plus辅助前端开发

前言

Element - The world’s most popular Vue UI framework，你值得拥有。
虽然HTML和CSS只学了点基础，但是因为答辩已经没有时间了！必须马上继续做项目了，因为使用到了VUE3.0，所以这里简介

提示：以下是本篇文章正文内容，下面案例可供参考

一、Element PLUS是什么？

ElementUI是一套基于VUE3.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网链接Element Plus.

在这里插入图片描述

二、所有组件

在这里插入图片描述

三、常用组件

1.Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中：

<el-dropdown split-button size="small" trigger="click">
  个人中心
  <el-dropdown-menu>
    <el-dropdown-item >退出系统</el-dropdown-item>
    <el-dropdown-item divided>修改密码</el-dropdown-item>
    <el-dropdown-item divided>联系管理员</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

2.NavMenu 导航菜单

为网站提供导航功能的菜单：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

<el-menu>
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item>选项1</el-menu-item>
    <el-menu-item>选项2</el-menu-item>
    <el-menu-item>选项3<