快速上手 ElementPlus：核心用法精讲

快速上手ElementPlus：Vue3 PC端UI组件库核心用法精讲

在Vue3开发PC端项目时，一款高效、易用的UI组件库能大幅降低开发成本，提升开发效率。ElementPlus作为饿了么团队打造的开源Vue3 UI组件库，凭借丰富的组件、优雅的设计和灵活的使用方式，成为了前端开发者的首选之一。本文将从ElementPlus基础介绍入手，讲解快速安装与引入方法，并重点拆解Form、Table、Dialog等高频常用组件的核心用法，帮助大家快速掌握组件使用技巧，实现"学一个通N个"的学习效果。

一、ElementPlus基础认知

1. 核心定义

首先要明确几个基础概念，理解组件库的本质：

组件：可复用的Vue实例，是一段独立的UI界面，包含专属的HTML+CSS+JavaScript，在代码中体现为独立的.vue文件。
组件库：多个功能组件的集合，整合了各类常用UI单元，无需开发者重复造轮子。
ElementPlus：基于Vue3开发的PC端开源UI组件库，默认中文语言，支持多语言切换，包含基础按钮、表单，到高级日期选择器、树形组件等全品类组件，覆盖绝大多数PC端开发场景。

2. 组件分类

ElementPlus的组件按功能划分为六大类，开发时可按需查找：

基础组件：按钮、输入框、布局等最基础的UI单元；
表单组件：输入框、单选框、下拉选择、校验规则等表单相关组件；
数据展示：表格、卡片、树形控件、走马灯等用于展示数据的组件；
导航组件：菜单、面包屑、分页、步骤条等实现页面导航的组件；
反馈组件：弹框、提示、加载、通知等与用户交互反馈的组件；
其他组件：覆盖拖拽、日历、水印等特殊场景的组件。

3. 学习核心

ElementPlus组件数量繁多，无需死记硬背每个组件的用法，核心是掌握组件使用逻辑 和官方文档阅读技巧：所有组件的使用都围绕"引入-配置属性-绑定事件-使用插槽"展开，掌握这一逻辑，就能举一反三，甚至快速适配其他Vue组件库。

二、ElementPlus快速开始

使用ElementPlus的第一步是完成安装与全局引入，整个过程简单高效，支持npm、yarn、pnpm三种包管理工具。

1. 安装组件库

根据自己使用的包管理工具，执行对应的安装命令即可：

Bash 复制代码

# npm
npm i element-plus

# yarn
yarn add element-plus

# pnpm
pnpm i element-plus

2. 完整全局引入

在Vue3项目的入口文件（如main.js/main.ts）中，导入ElementPlus核心和样式，并通过app.use()全局注册，即可在项目所有组件中直接使用：

JavaScript 复制代码

// 导入ElementPlus组件
import ElementPlus from 'element-plus'
// 导入组件样式
import 'element-plus/dist/index.css'

// 全局注册所有组件
app.use(ElementPlus)

3. 快速测试

全局引入后，可在App.vue中直接使用ElementPlus的el-button组件做简单测试，验证是否引入成功：

Plain 复制代码

<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>

运行项目后，若页面显示出ElementPlus样式的按钮，说明引入成功。

三、高频核心组件实战用法

掌握基础引入后，接下来重点讲解开发中使用频率最高的Form、Card、Table、Tree、Dialog、Menu六大组件，涵盖基础使用 、核心属性 、实战技巧三大维度。

1. Form表单组件：数据收集与校验的核心

Form组件是PC端开发中最常用的组件之一，用于收集、验证和提交用户输入的信息，ElementPlus的Form组件已从2.x的Float布局升级为Flex布局，布局更灵活。

核心功能

整合输入框、单选框、下拉选择、复选框、开关等表单单元，支持自定义校验规则、整体校验、表单重置等核心功能。

基础使用要点

用el-form包裹整个表单，通过:model绑定表单数据对象，label-width设置标签宽度（支持auto）；
每个表单项用el-form-item包裹，label设置表单项标签，通过prop绑定校验字段；
表单项内部使用ElementPlus表单控件，通过v-model实现与表单数据的双向绑定。

表单校验关键步骤

定义校验规则对象 ：为每个需要校验的字段设置规则，如是否必填、长度限制、触发方式（失焦blur/值变化change）；
el-form通过:rules绑定校验规则，通过ref获取表单实例，用于调用校验方法；
调用表单实例的validate()方法实现整体校验 ，resetFields()方法实现表单重置；
结合ElMessage组件实现校验结果的提示反馈。

实战小案例：登录表单

实现用户名（3-10位，必填，失焦校验）、密码（6-15位，必填，失焦校验）的登录表单，点击登录做整体校验，点击取消重置表单，核心代码可参考ElementPlus官方文档结合本文基础用法实现，核心是掌握"数据绑定-规则定义-方法调用"的逻辑。

2. Card卡片组件：信息聚合展示

Card组件用于将相关信息聚合在卡片容器中展示，适合展示产品信息、用户资料、数据统计等场景，结构简洁，可自定义头部、主体、尾部内容。

核心用法

基础容器为el-card，通过style设置卡片宽高；
通过具名插槽 自定义内容：#header定义卡片头部，#default定义卡片主体（可省略），#footer定义卡片尾部；
插槽内部可自由组合HTML和其他ElementPlus组件，实现个性化展示。

基础示例

Plain 复制代码

<el-card style="max-width: 480px">
  <template #header>
    <div>Card name</div>
  </template>
  <template #default>
    <p v-for="i in 4" :key="i">List item {{ i }}</p>
  </template>
  <template #footer>Footer content</template>
</el-card>

3. Table表格组件：结构化数据展示

Table组件用于展示多条结构类似的结构化数据，支持斑马纹、边框、列宽自定义、自定义列模板等功能，是后台管理系统的核心组件。

基础使用要点

el-table通过:data绑定数据源（数组对象），stripe开启斑马纹，border显示边框；
每一列用el-table-column定义，prop绑定数据源的字段名，label设置列名，width设置固定列宽；
支持通过插槽自定义列内容，可获取row（当前行数据）、$index（行索引）等参数。

进阶技巧：自定义操作列

开发中常需要为表格添加编辑、删除等操作列，需结合ElementPlus图标组件实现：

安装图标模块：npm install @element-plus/icons-vue；
在入口文件导入并注册所需图标（如Edit、Delete）；
通过el-table-column的插槽自定义操作列，嵌入图标组件。

4. Tree树形组件：层级结构信息展示

Tree组件用于以清晰的层级结构展示信息，支持展开/折叠、节点选择、自定义节点内容，适合展示部门结构、文件目录、分类菜单等层级数据。

基础使用要点

el-tree通过:data绑定树形数据源（数组对象，子节点通过children字段嵌套）；
通过:props指定节点标签（label）和子节点字段（children），适配自定义数据源字段名；
show-checkbox开启节点复选框，accordion设置每次只展开一个同级节点，@node-click绑定节点点击事件。

进阶技巧：自定义节点内容

通过作用域插槽 #default自定义节点内容，可在节点后添加追加、删除等按钮，插槽可获取data（当前节点数据），实现节点的个性化操作。

5. Dialog弹框组件：页面状态保留的交互反馈

Dialog组件用于在保留当前页面状态的前提下，告知用户信息并承载相关操作，适合弹窗编辑、确认删除、信息提示等场景，定制性极强。

核心使用要点

通过v-model绑定布尔值，控制弹框的显示/隐藏；
title设置弹框标题，width设置弹框宽度，:before-close绑定关闭前的回调函数（如二次确认）；
通过具名插槽 自定义内容：默认插槽为弹框主体，#footer为弹框底部操作区；
结合ElMessageBox组件实现关闭前的二次确认，提升交互体验。

Menu组件为网站提供导航功能，支持垂直/水平两种模式，可实现一级菜单、二级菜单，甚至多级菜单，适合后台管理系统的侧边导航、顶部导航。

核心使用要点

el-menu为菜单容器，mode设置菜单模式（vertical垂直/horizontal水平）；
配置菜单样式：background-color设置背景色，text-color设置文字色，active-text-color设置激活项文字色；
el-sub-menu实现二级菜单，通过#title定义子菜单标题，可嵌入图标；
el-menu-item为具体菜单项，index设置唯一标识，default-active设置默认激活项，disabled设置禁用状态；
绑定@open/@close事件，监听子菜单的展开/关闭。

四、ElementPlus学习与使用技巧

善用官方文档 ：ElementPlus官方文档（https://element-plus.org/zh-CN/）是最权威的参考资料，每个组件都有详细的属性、事件、插槽说明和示例代码，开发时按需查阅；
按需引入 ：本文讲解的是完整引入，适合快速开发和小项目；大型项目建议使用按需引入，减少打包体积，可结合unplugin-vue-components插件实现自动按需引入；
属性/事件/插槽通用逻辑 ：所有ElementPlus组件的使用都遵循"配置属性 （控制组件外观和行为）、绑定事件 （处理用户交互）、使用插槽（自定义内容）"的逻辑，掌握这一逻辑，就能快速上手任意组件；
组件封装：对于项目中频繁使用的组合式组件（如带校验的登录表单、带操作列的表格），可进行二次封装，提取公共逻辑，提升项目可维护性；
样式自定义：ElementPlus支持通过自定义CSS变量、覆盖默认样式、使用scoped样式穿透等方式修改组件样式，适配项目的UI设计规范。

五、总结

ElementPlus作为Vue3生态中最成熟的PC端UI组件库之一，以其丰富的组件、简洁的API、良好的兼容性，成为了Vue3 PC端开发的优选。本文从基础认知、快速安装，到六大高频组件的核心用法，讲解了ElementPlus的核心使用逻辑，核心并非死记硬背每个组件的用法，而是掌握**"属性-事件-插槽"**的通用使用思路，以及官方文档的阅读技巧。

掌握ElementPlus后，不仅能高效开发PC端项目，更能触类旁通，快速适配其他Vue3组件库（如Ant Design Vue、Naive UI），因为所有组件库的设计思路都大同小异。后续开发中，建议结合实际项目需求，多练多用，将组件的用法融入项目实战，真正实现"学1个组件通N个组件，学1个组件库通N个组件库"。

快速上手 ElementPlus：核心用法精讲