Element Plus常见基础组件（一） - 指南

基础组件

Button 按钮

一、基础用法

默认按钮
主要按钮

二、按钮类型 (type)

类型	说明	示例代码
default	默认按钮	<el-button>默认</el-button>
primary	主要按钮（蓝色）	<el-button type="primary">
success	成功按钮（绿色）	<el-button type="success">
warning	警告按钮（黄色）	<el-button type="warning">
danger	危险按钮（红色）	<el-button type="danger">
info	信息按钮（灰色）	<el-button type="info">
text	文字按钮	<el-button type="text">

三、核心属性详解

1. size - 按钮尺寸

   大型
   默认
   小型

2. icon - 图标按钮

   搜索

3. disabled - 禁用状态

   不可点击

4. loading - 加载状态

   加载中

5. round - 圆角按钮

   圆角按钮

6. plain - 朴素样式（无背景色）

   朴素按钮

7. link - 链接样式

   链接按钮

8. circle - 圆形按钮

9. autofocus - 自动聚焦

   自动聚焦

10. native-type - 原生按钮类型

    提交表单

11. color-自定义按钮颜色

    自定义颜色

四、特殊按钮

1. 文字按钮组

   首页
   禁用文字按钮

2. 图标+文字组合

   下载

3. 按钮组 (el-button-group)

   上一页
   下一页

五、完整属性表

属性	说明	类型	可选值	默认值
type	按钮类型	string	primary/success/warning/danger/info/text	default
size	尺寸	string	large/default/small	default
icon	图标组件	Component / string	-	—
native-type	原生 type 属性	string	button / submit / reset	button
loading	加载状态	boolean	—	false
disabled	禁用状态	boolean	—	false
plain	朴素样式	boolean	—	false
round	圆角按钮	boolean	—	false
circle	圆形按钮	boolean	—	false
link	链接按钮	boolean	—	false
autofocus	自动聚焦	boolean	—	false
loading-icon	自定义加载图标	Component / string	-	Loading

提示：所有图标需先导入 @element-plus/icons-vue，可通过 Element Plus 图标文档 查询可用图标

Border 边框

一、基础使用

在元素上直接添加以下类名即可生效，无需额外导入 CSS

类名	作用
el-border	添加全方向1px边框
el-border-top	仅添加上边框
el-border-left	仅添加左边框
el-border-bottom	仅添加下边框
el-border-right	仅添加右边框
el-border-0	移除全部边框

示例代码：

全边框容器
上边框标题

二、边框粗细控制

通过组合类名精确控制边框粗细：

类名	作用
el-border-base	默认1px边框（同.el-border）
el-border-thin	0.5px超细边框
el-border-thick	2px粗边框

使用示例：

粗边框容器
标准上边框

三、边框样式定制

支持多种边框样式，与其他属性组合使用：

类名	作用
el-border-solid	实线（默认）
el-border-dashed	虚线
el-border-dotted	点状线
el-border-double	双实线

高级组合示例：

粗虚线边框
点状下划线

四、边框颜色控制

使用语义化颜色类名（需激活主题色）：

类名	颜色说明
el-border-primary	主题主色（默认蓝）
el-border-success	成功绿色
el-border-warning	警告黄色
el-border-danger	危险红色
el-border-info	信息灰色

带颜色的边框示例：

成功提示框
警告上边框

提示：在 app.vue 中设置主题色：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
const app = createApp(App)
app.use(ElementPlus, {
color: '#ff4500' // 自定义主题色
})

五、圆角控制

完整圆角控制解决方案：

类名	作用
el-border-radius-base	默认圆角（4px）
el-border-radius-small	小圆角（2px）
el-border-radius-round	大圆角（20px）
el-border-radius-circle	圆形（50%）

圆角组合示例：

标准圆角卡片
圆形按钮

Container 布局容器

一、容器组件架构

组件特性：自动实现 Flex 弹性布局，无需手动编写 flex 属性

二、核心组件 API 详解

1. <el-container> 根容器

参数	类型	默认值	说明
direction	vertical/horizontal	horizontal	子元素的排列方向
事件	说明
@scroll	容器滚动时触发

2. <el-header> 顶栏

参数	类型	默认值	说明
height	string/number	60px	设置高度（支持任何 CSS 单位）
插槽	说明
default	自定义头部内容

3. <el-aside> 侧边栏

参数	类型	默认值	说明
width	string/number	300px	设置宽度
collapse	boolean	false	折叠状态
事件	说明
@collapse-change	折叠状态变化时触发

4. <el-main> 主内容区

特性	说明
自动特性	自动填充剩余空间并生成垂直滚动条
插槽	default 区域用于放置页面核心内容

5. <el-footer> 底栏

参数	类型	默认值
height	string/number	60px

三、三种经典布局方案

方案1：上下布局（管理后台常用）

系统标题
菜单导航
数据看板

方案2：左右布局（文档类页面）

文档目录
当前章节标题
文档内容
版权信息

方案3：顶部主导航+二级侧栏

主导航栏
二级导航
主体内容
操作指引

四、高级开发技巧

1. 动态侧边栏（带折叠动画）

import { ref } from 'vue'
const isCollapsed = ref(false)
{{ isCollapsed ? '展开' : '折叠' }}
导航内容

2. 悬浮顶栏（滚动时固定）

/* 全局样式 */
.el-header {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
transition: all 0.3s;
}

3. 响应式适配（移动端优化）

 768 ? '220px' : '0'">
 768">桌面端菜单
// 监听窗口变化
import { onMounted, onUnmounted, ref } from 'vue'
const windowWidth = ref(window.innerWidth)
const handleResize = () => windowWidth.value = window.innerWidth
onMounted(() => window.addEventListener('resize', handleResize))
onUnmounted(() => window.removeEventListener('resize', handleResize))

Layout 布局

一、基础布局示例

24 分栏 - 头部
6 分栏 - 侧边栏
18 分栏 - 内容区
8 分栏 - 卡片1
8 分栏 - 卡片2
8 分栏 - 卡片3
6 分栏
偏移6列
6 分栏
.layout-demo {
max-width: 1200px;
margin: 20px auto;
}
.header, .footer {
background-color: #3498db;
color: white;
}
.sidebar {
background-color: #2ecc71;
color: white;
}
.main {
background-color: #f1c40f;
}
.card {
background-color: #e74c3c;
color: white;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
padding: 20px 0;
margin-bottom: 10px;
}

二、核心概念

1. 栅格系统

• 总宽度分为 24 栏
• <el-row> 代表行容器
• <el-col> 代表列容器，可通过 span 设置占据列数

2. 关键功能

• 间隔: 使用 gutter 设置列间距
• 响应式: 适配多种屏幕尺寸
• 偏移: 使用 offset 设置列偏移量
• 对齐: 支持水平和垂直对齐方式

三、布局方式详解

1. 基础分栏布局

8列(33%)
8列(33%)
8列(33%)

2. 设置间隔 (gutter)

6列(间隔20px)
6列(间隔20px)
6列(间隔20px)
6列(间隔20px)

3. 响应式布局

自适应布局
大屏内容区域

4. 偏移布局

偏移6列


偏移6列

5. 对齐方式

居中
居中
右对齐
垂直居中
高度不一致

四、完整API详解

Row（行）属性

参数	说明	类型	可选值	默认值
gutter	列间距（单位px）	number	—	0
justify	水平排列方式	string	start/end/center/space-around/space-between	start
align	垂直排列方式	string	top/middle/bottom	top
tag	自定义HTML标签	string	*	div

Col（列）属性

参数	说明	类型	可选值	默认值
span	栅格占位（1-24）	number	—	24
offset	左侧偏移量（列数）	number	—	0
push	向右移动列数（DOM顺序不变）	number	—	0
pull	向左移动列数（DOM顺序不变）	number	—	0
xs	<768px 的响应式设置	number/object	—	—
sm	≥768px 的响应式设置	number/object	—	—
md	≥992px 的响应式设置	number/object	—	—
lg	≥1200px 的响应式设置	number/object	—	—
xl	≥1920px 的响应式设置	number/object	—	—
tag	自定义HTML标签	string	*	div

响应式对象的可选值

...

响应式配置对象属性：

• span - 栅格占位
• offset - 左侧偏移量
• push - 向右移动量
• pull - 向左移动量