Element Plus常见基础组件（一）

基础组件

Button 按钮

一、基础用法

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-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 - 按钮尺寸

   <el-button size="large">大型</el-button>
   <el-button size="default">默认</el-button>
   <el-button size="small">小型</el-button>
   

2. icon - 图标按钮

   <el-button icon="el-icon-search">搜索</el-button>
   <el-button icon="el-icon-edit" circle /> <!-- 圆形图标按钮 -->
   

3. disabled - 禁用状态

   <el-button disabled>不可点击</el-button>
   

4. loading - 加载状态

   <el-button :loading="true">加载中</el-button>
   

5. round - 圆角按钮

   <el-button round>圆角按钮</el-button>
   

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

   <el-button plain>朴素按钮</el-button>
   

7. link - 链接样式

   <el-button type="primary" link>链接按钮</el-button>
   

8. circle - 圆形按钮

   <el-button icon="el-icon-plus" circle />
   

9. autofocus - 自动聚焦

   <el-button autofocus>自动聚焦</el-button>
   

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

    <el-button native-type="submit">提交表单</el-button>
    <!-- 可选值: button / submit / reset -->
    

11. color-自定义按钮颜色

    <le-button type="primary" color="#123456">自定义颜色</el-button>
    

四、特殊按钮

1. 文字按钮组

   <el-button type="text">首页</el-button>
   <el-button type="text" disabled>禁用文字按钮</el-button>
   

2. 图标+文字组合

   <el-button>下载 <el-icon><Download /></el-icon>
   </el-button>
   

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

   <el-button-group><el-button icon="el-icon-arrow-left">上一页</el-button><el-button>下一页 <i class="el-icon-arrow-right"></i></el-button>
   </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	移除全部边框

示例代码：

<div class="el-border">全边框容器</div>
<div class="el-border-top">上边框标题</div>

二、边框粗细控制

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

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

使用示例：

<div class="el-border el-border-thick">粗边框容器</div>
<div class="el-border-top el-border-base">标准上边框</div>

三、边框样式定制

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

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

高级组合示例：

<div class="el-border el-border-dashed el-border-thick">粗虚线边框</div>
<div class="el-border-bottom el-border-dotted">点状下划线</div>

四、边框颜色控制

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

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

带颜色的边框示例：

<div class="el-border el-border-success">成功提示框</div>
<div class="el-border-top el-border-warning">警告上边框</div>

💡 提示：在 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%）

圆角组合示例：

<div class="el-border el-border-radius-base">标准圆角卡片</div>
<button class="el-border el-border-radius-circle">圆形按钮</div>

Container 布局容器

一、容器组件架构

<el-container>           <!-- 根容器：管理整体布局流 --><el-header></el-header>   <!-- 顶栏：页面头部 --><el-aside></el-aside>     <!-- 侧栏：导航菜单区 --><el-main></el-main>       <!-- 主区：核心内容容器 --><el-footer></el-footer>   <!-- 底栏：页面底部信息 -->
</el-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：上下布局（管理后台常用）

<el-container direction="vertical"><el-header>系统标题</el-header><el-container><el-aside width="200px">菜单导航</el-aside><el-main>数据看板</el-main></el-container>
</el-container>

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

<el-container><el-aside width="240px">文档目录</el-aside><el-container direction="vertical"><el-header>当前章节标题</el-header><el-main>文档内容</el-main><el-footer>版权信息</el-footer></el-container>
</el-container>

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

<el-container direction="vertical"><el-header>主导航栏</el-header><el-container><el-aside width="180px">二级导航</el-aside><el-container direction="vertical"><el-main>主体内容</el-main><el-footer>操作指引</el-footer></el-container></el-container>
</el-container>

四、高级开发技巧

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

<script setup>
import { ref } from 'vue'
const isCollapsed = ref(false)
</script><template><el-aside :width="isCollapsed ? '64px' : '240px'"@collapse-change="isCollapsed = $event"><el-button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '折叠' }}</el-button><transition name="el-fade-in-linear"><div v-show="!isCollapsed">导航内容</div></transition></el-aside>
</template>

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. 响应式适配（移动端优化）

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

Layout 布局

一、基础布局示例

<template><div class="layout-demo"><el-row><el-col :span="24"><div class="grid-content header">24 分栏 - 头部</div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content sidebar">6 分栏 - 侧边栏</div></el-col><el-col :span="18"><div class="grid-content main">18 分栏 - 内容区</div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content card">8 分栏 - 卡片1</div></el-col><el-col :span="8"><div class="grid-content card">8 分栏 - 卡片2</div></el-col><el-col :span="8"><div class="grid-content card">8 分栏 - 卡片3</div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content footer">6 分栏</div></el-col><el-col :span="6" :offset="6"><div class="grid-content footer">偏移6列</div></el-col><el-col :span="6"><div class="grid-content footer">6 分栏</div></el-col></el-row></div>
</template><style scoped>
.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;
}
</style>

二、核心概念

1. 栅格系统

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

2. 关键功能

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

三、布局方式详解

1. 基础分栏布局

<el-row><el-col :span="8">8列(33%)</el-col><el-col :span="8">8列(33%)</el-col><el-col :span="8">8列(33%)</el-col>
</el-row>

2. 设置间隔 (gutter)

<el-row :gutter="20"><el-col :span="6"><div>6列(间隔20px)</div></el-col><el-col :span="6"><div>6列(间隔20px)</div></el-col><el-col :span="6"><div>6列(间隔20px)</div></el-col><el-col :span="6"><div>6列(间隔20px)</div></el-col>
</el-row>

3. 响应式布局

<el-row :gutter="10"><!-- 超小屏幕(手机)12分栏，小屏幕(平板)6分栏，中屏及以上8分栏 --><el-col :xs="12" :sm="6" :md="8" :lg="8" :xl="8"><div>自适应布局</div></el-col><!-- 大屏应用示例 --><el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12"><div>大屏内容区域</div></el-col>
</el-row>

4. 偏移布局

<el-row><el-col :span="6" :offset="6"><div>偏移6列</div></el-col><el-col :span="6" :offset="6"><div>偏移6列</div></el-col>
</el-row>

5. 对齐方式

<!-- 水平对齐 -->
<el-row justify="center"><el-col :span="6"><div>居中</div></el-col><el-col :span="6"><div>居中</div></col>
</el-row><el-row justify="end"><el-col :span="6"><div>右对齐</div></el-col>
</el-row><!-- 垂直对齐 -->
<el-row align="middle" style="height: 100px;"><el-col :span="6"><div>垂直居中</div></el-col><el-col :span="6"><div style="height: 60px;">高度不一致</div></el-col>
</el-row>

四、完整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

响应式对象的可选值

<el-col :md="{ span: 8, offset: 2 }">...
</el-col>

响应式配置对象属性：

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