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">`

三、核心属性详解

size - 按钮尺寸

复制代码

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

icon - 图标按钮

复制代码

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

disabled - 禁用状态

复制代码

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

loading - 加载状态

复制代码

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

round - 圆角按钮

复制代码

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

plain - 朴素样式（无背景色）
复制代码
```
<el-button plain>朴素按钮</el-button>
```

link - 链接样式

复制代码

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

circle - 圆形按钮

复制代码

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

autofocus - 自动聚焦

复制代码

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

native-type - 原生按钮类型

复制代码

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

color-自定义按钮颜色

复制代码

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

四、特殊按钮

文字按钮组

复制代码

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

图标+文字组合

复制代码

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

按钮组 (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.innerWidth

onMounted(() => 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 - 向左移动量

Element Plus常见基础组件（一）

基础组件

Button 按钮

一、基础用法

二、按钮类型 (type)

三、核心属性详解

四、特殊按钮

五、完整属性表

Border 边框

一、基础使用

二、边框粗细控制

三、边框样式定制

四、边框颜色控制

五、圆角控制

Container 布局容器

一、容器组件架构

二、核心组件 API 详解

1. <el-container> 根容器

2. <el-header> 顶栏

3. <el-aside> 侧边栏

4. <el-main> 主内容区

5. <el-footer> 底栏

三、三种经典布局方案

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

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

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

四、高级开发技巧

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

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

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

Layout 布局

一、基础布局示例

二、核心概念

1. 栅格系统

2. 关键功能

三、布局方式详解

1. 基础分栏布局

2. 设置间隔 (gutter)

3. 响应式布局

4. 偏移布局

5. 对齐方式

四、完整API详解

Row（行）属性

Col（列）属性

响应式对象的可选值

1. `<el-container>` 根容器

2. `<el-header>` 顶栏

3. `<el-aside>` 侧边栏

4. `<el-main>` 主内容区

5. `<el-footer>` 底栏