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.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 - 向左移动量