三、核心组件详解

3.1 按钮组件 Button
按钮是用户交互中最基础的组件，Element Plus的Button组件提供了丰富的样式和状态配置。

按钮类型
Element Plus定义了6种按钮类型，每种类型都有明确的语义：

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

按钮类型说明：primary用于主要操作（如提交、保存），success用于正向操作（如通过、发布），danger用于破坏性操作（如删除），warning用于需要谨慎的操作，info用于中性信息展示，默认按钮用于一般性操作（如取消、返回）。

<template>
  <div>
    <el-button size="large">大按钮</el-button>
    <el-button>默认按钮</el-button>
    <el-button size="small">小按钮</el-button>
  </div>
</template>

按钮样式变体
Element Plus提供了多种按钮样式变体，满足不同设计需求：

<template>
  <div>
    <!-- 朴素按钮（描边） -->
    <el-button type="primary" plain>朴素按钮</el-button>

    <!-- 圆角按钮 -->
    <el-button type="primary" round>圆角按钮</el-button>

    <!-- 圆形按钮（通常用于图标按钮） -->
    <el-button type="primary" circle>
      <el-icon><Search /></el-icon>
    </el-button>

    <!-- 文本按钮 -->
    <el-button type="primary" text>文本按钮</el-button>

    <!-- 链接按钮（2.2.1+版本） -->
    <el-button type="primary" link>链接按钮</el-button>

    <!-- 禁用按钮 -->
    <el-button type="primary" disabled>禁用按钮</el-button>

    <!-- 加载按钮 -->
    <el-button type="primary" loading>加载中</el-button>
  </div>
</template>

图标按钮
Element Plus支持在按钮中添加图标，可以提升操作的直观性：

<template>
  <div>
    <!-- 纯图标按钮 -->
    <el-button type="primary" :icon="Share" circle></el-button>

    <!-- 图标在前 -->
    <el-button type="primary" :icon="Search">搜索</el-button>

    <!-- 图标在后 -->
    <el-button type="primary">
      上传
      <el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { Share, Search, Upload } from '@element-plus/icons-vue'
</script>

按钮组

当多个操作相关联时，可以使用将它们组合在一起，消除重复边框：

<template>
  <el-button-group>
    <el-button type="primary">上一页</el-button>
    <el-button type="primary">下一页</el-button>
  </el-button-group>
</template>
#

3.2 布局组件
3.2.1 栅格系统 Grid
Element Plus的栅格系统基于24列设计，通过Row和Col组件组合实现响应式布局：

<template>
  <el-row :gutter="20">
    <!-- gutter设置列间距，单位px -->
    <el-col :span="12">
      <div class="grid-content">占12列</div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content">占12列</div>
    </el-col>
  </el-row>

  <!-- 响应式布局 -->
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <div class="grid-content">响应式列</div>
    </el-col>
  </el-row>

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

  <!-- 列排序（push/pull） -->
  <el-row>
    <el-col :span="18" :push="6">
      <div class="grid-content">右侧内容</div>
    </el-col>
    <el-col :span="6" :pull="18">
      <div class="grid-content">左侧内容</div>
    </el-col>
  </el-row>
</el-row>

3.2.2 间距组件 Space

组件用于管理子元素之间的间距，是中后台布局中非常实用的辅助组件：

<template>
  <!-- 水平间距 -->
  <el-space>
    <el-button>按钮1</el-button>
    <el-button>按钮2</el-button>
    <el-button>按钮3</el-button>
  </el-space>

  <!-- 垂直间距 -->
  <el-space direction="vertical" :size="20">
    <el-card>卡片1</el-card>
    <el-card>卡片2</el-card>
  </el-space>

  <!-- 自定义间距 -->
  <el-space wrap :size="[10, 20]">
    <el-tag v-for="i in 10" :key="i">标签{
  { i }}</el-tag>
  </el-space>
</template>

3.3 表单组件 Form

表单是企业级应用中最核心的组件之一。Element Plus的表单组件提供了完善的验证机制和优雅的错误提示。

基础表单结构

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="100px"
    label-position="right"
    size="default"
  >
    <el-form-item label="用户名" prop="username">
      <el-input
        v-model="formData.username"
        placeholder="请输入用户名"
        clearable
      />
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input
        v-model="formData.email"
        placeholder="请输入邮箱"
        clearable
      />
    </el-form-item>

    <el-form-item label="角色" prop="role">
      <el-select v-model="formData.role" placeholder="请选择角色" clearable>
        <el-option label="管理员" value="admin" />
        <el-option label="普通用户" value="user" />
      </el-select>
    </el-form-item>

    <el-form-item label="状态" prop="status">
      <el-switch v-model="formData.status" active-text="启用" inactive-text="禁用" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()

const formData = reactive({
  username: '',
  email: '',
  role: '',
  status: false
})

// 表单验证规则
const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ]
}

const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功')
      console.log('表单数据:', formData)
    } else {
      ElMessage.error('请正确填写表单')
    }
  })
}

const handleReset = () => {
  formRef.value?.resetFields()
}
</script>

表单验证规则详解
Element Plus的表单验证基于async-validator库，提供了丰富的内置验证规则和自定义验证能力：

自定义验证器示例：

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('密码长度不能少于6位'))
  } else {
    callback()
  }
}

const formRules = {
  password: [
    { validator: validatePass, trigger: 'blur' }
  ]
}

3.4 表格组件 Table
表格是中后台系统中最复杂的组件之一，Element Plus的Table组件支持排序、筛选、分页、多选、自定义列、树形数据等丰富功能。

基础表格

<template>
  <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="日期" width="180" sortable />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
    <el-table-column label="状态" width="100">
      <template #default="{ row }">
        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
          {
  { row.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150" fixed="right">
      <template #default="{ row }">
        <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
        <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

const handleEdit = (row) => {
  console.log('编辑', row)
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}
</script>

3.5 数据录入组件
Element Plus提供了完整的数据录入组件体系：

<template>
  <div>
    <!-- 输入框 -->
    <el-input v-model="inputValue" placeholder="请输入" clearable />

    <!-- 带前后缀的输入框 -->
    <el-input v-model="searchValue" placeholder="请输入">
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>

    <!-- 文本域 -->
    <el-input v-model="textareaValue" type="textarea" :rows="4" />

    <!-- 数字输入框 -->
    <el-input-number v-model="numValue" :min="1" :max="100" />

    <!-- 下拉选择 -->
    <el-select v-model="selectValue" placeholder="请选择" clearable filterable>
      <el-option label="选项一" value="1" />
      <el-option label="选项二" value="2" />
    </el-select>

    <!-- 级联选择 -->
    <el-cascader v-model="cascaderValue" :options="options" />

    <!-- 日期时间选择 -->
    <el-date-picker v-model="dateValue" type="datetime" placeholder="选择日期时间" />

    <!-- 日期范围选择 -->
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    />

    <!-- 单选框 -->
    <el-radio-group v-model="radioValue">
      <el-radio label="1">选项一</el-radio>
      <el-radio label="2">选项二</el-radio>
    </el-radio-group>

    <!-- 多选框 -->
    <el-checkbox-group v-model="checkboxValue">
      <el-checkbox label="1">选项一</el-checkbox>
      <el-checkbox label="2">选项二</el-checkbox>
    </el-checkbox-group>

    <!-- 开关 -->
    <el-switch v-model="switchValue" />

    <!-- 滑块 -->
    <el-slider v-model="sliderValue" :min="0" :max="100" />
  </div>
</template>

3.6 反馈组件
消息提示 Message

<script setup>
import { ElMessage } from 'element-plus'

const showMessage = () => {
  ElMessage.success('操作成功')
  ElMessage.warning('警告信息')
  ElMessage.error('错误信息')
  ElMessage.info('提示信息')

  // 自定义配置
  ElMessage({
    message: '自定义消息',
    type: 'success',
    duration: 3000,
    showClose: true
  })
}
</script>

确认弹窗 MessageBox

<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'

const confirmDelete = () => {
  ElMessageBox.confirm('确定删除这条数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
</script>

通知 Notification

<script setup>
import { ElNotification } from 'element-plus'

const showNotification = () => {
  ElNotification.success({
    title: '成功',
    message: '操作成功完成',
    duration: 3000,
    position: 'top-right'
  })
}
</script>

四、主题定制

Element Plus提供了灵活的主题定制能力，支持通过SCSS变量覆盖或CSS变量两种方式。
https://yyvgt.cn/category/jiujieshao.html
4.1 基础原理
Element Plus的样式系统基于SCSS编写，其主题相关的颜色、尺寸、间距等都定义为SCSS变量（变量名通常以$--el-开头）。主题定制的原理就是利用Sass的变量覆盖特性——在导入Element Plus的SCSS源文件之前，先定义自定义的变量值，Sass编译器在处理时就会使用新值替换默认值。

4.2 SCSS变量覆盖方式
方式一：在Vite项目中定制主题
步骤1：创建自定义主题文件

// src/styles/element/index.scss
// 覆盖Element Plus的SCSS变量

// 主题主色（例如设置为紫色）
$--el-color-primary: #7c3aed;
$--el-color-primary-light-3: #a78bfa;
$--el-color-primary-light-5: #c4b5fd;
$--el-color-primary-light-7: #ddd6fe;
$--el-color-primary-light-8: #ede9fe;
$--el-color-primary-light-9: #f5f3ff;
$--el-color-primary-dark-2: #6d28d9;

// 功能色
$--el-color-success: #10b981;
$--el-color-warning: #f59e0b;
$--el-color-danger: #ef4444;
$--el-color-info: #6b7280;

// 圆角
$--el-border-radius-base: 8px;

// 导入Element Plus的SCSS源文件
@use "element-plus/theme-chalk/src/index.scss" as *;

步骤2：安装sass依赖

npm install -D sass

步骤3：在main.js中导入自定义主题

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'

// 导入自定义主题文件（必须在Element Plus样式之前）
import './styles/element/index.scss'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

步骤4：Vite配置（按需引入时）

如果使用按需引入，需要在vite.config.ts中进行额外配置：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
    ElementPlus({ useSource: true }),  // 使用SCSS源文件
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  },
})

4.3 CSS变量方式
Element Plus也支持通过CSS变量进行运行时主题切换：

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus'

// 动态修改CSS变量
const setTheme = (color) => {
  document.documentElement.style.setProperty('--el-color-primary', color)
}
</script>

4.4 常用可覆盖变量

来源：
https://yyvgt.cn/