Vue3+Element Plus组件实战：核心组件属性与代码示例详解

脚本专家

在Vue3项目中集成Element Plus是快速构建后台管理界面的常用方式。本文通过实例详解开关、滑块、选择器、提示类、表格等核心组件的属性配置与调用方法，帮助开发者快速上手。

一、开关与滑块组件

开关(el-switch)提供开/关两种状态，常用于功能开关。常用属性包括：disabled(禁用)、loading(加载中)、width(宽度)、active-text(开启文字)、inactive-text(关闭文字)、active-value/inactive-value(绑定值)、active-color/inactive-color(背景色)、before-change(状态改变前回调)、change(状态改变后回调)。示例代码：

2. <template>
3.   <div style="margin: 20px;">
4.     <el-switch v-model="switch1" active-text="会员" inactive-text="非会员" active-color="#00FF00" inactive-color="#FF0000"></el-switch>
5.     <el-switch v-model="switch2" active-text="加载中" :loading="true"></el-switch>
6.     <el-switch v-model="switch3" inactive-text="禁用" :disabled="true"></el-switch>
7.   </div>
8. </template>

复制代码

滑块(el-slider)支持连续或离散值调节，可配合输入框使用。常用属性：min/max(范围)、step(步长)、show-input(显示输入框)、show-stops(显示间断点)、format-tooltip(格式化提示文字)、range(范围选择)、marks(标记)。基础用法只需绑定v-model，默认0~100。自定义百分比显示：

2. <script setup>
3. import { ref } from 'vue'
4. const sliderValue = ref(50)
5. const format = (value) => `${value}%`
6. </script>
7. <template>
8.   <el-slider v-model="sliderValue" :format-tooltip="format" :step="10" :show-stops="true"></el-slider>
9. </template>

复制代码

范围选择设置range=true，标记可通过marks对象指定节点样式：

2. const marks = {
3.   0: '起点',
4.   50: '半程',
5.   90: { style: {color: '#ff0000'}, label: '就到终点啦' }
6. }

复制代码

二、选择器组件

时间选择器(el-time-picker)支持时间点或范围选择。常用属性：is-range(范围选择)、arrow-control(箭头选择)、format(时间格式，默认HH:mm:ss)、disabledHours等禁用函数。范围选择示例：

2. <el-time-picker :is-range="true" v-model="time" range-separator="~" :arrow-control="true" start-placeholder="开始时间" end-placeholder="结束时间"></el-time-picker>

复制代码

若需列表样式选择，可用el-time-select，支持start/step/end属性。

日期选择器(el-date-picker)提供日历视图。常用属性：type(日期类型，如daterange、datetime)、format(格式，默认YYYY-MM-DD)、range-separator(分隔符)、disabledDate(禁用日期函数)。范围选择示例：

2. <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

复制代码

type设置为datetime可同时选择日期和时间。

颜色选择器(el-color-picker)提供调色板。常用属性：show-alpha(透明度)、color-format(颜色格式，如hex/rgb)、predefine(预定义颜色数组)。简单使用：

2. <el-color-picker :show-alpha="true" v-model="color"></el-color-picker>

复制代码

三、提示类组件

警告组件(el-alert)用于展示重要提示信息，有success/info/warning/error四种类型。常用属性：title(标题)、description(描述)、closable(能否关闭)、show-icon(显示图标)、effect(主题：light/dark)。示例：

2. <el-alert title="成功提示的文案" type="success"></el-alert>
3. <el-alert title="消息提示的文案" type="info"></el-alert>
4. <el-alert title="警告提示的文案" type="warning"></el-alert>
5. <el-alert title="错误提示的文案" type="error"></el-alert>

复制代码

el-alert为常驻提示，需用户手动关闭。

消息提示(ElMessage)通过函数调用，3秒后自动消失。常用参数：message(内容)、type(类型)、duration(显示时间，默认3000ms)、showClose(关闭按钮)、onClose(关闭回调)。调用方式：

2. <script setup>
3. import { ElMessage } from 'element-plus'
4. function popTip() {
5.   ElMessage({ message: '提示内容', type: 'warning' })
6. }
7. </script>
8. <template>
9.   <el-button @click="popTip">弹出信息提示</el-button>
10. </template>

复制代码

复杂提示(ElMessageBox)类似系统弹窗，支持确认/取消/输入框。常用参数：title、message、type、showCancelButton、showConfirmButton、showInput、callback等。示例：

2. <script setup>
3. import { ElMessageBox } from 'element-plus'
4. function popTip() {
5.   ElMessageBox({ title: '提示', message: '详细的提示内容', type: 'warning', showCancelButton: true, showConfirmButton: true, showInput: true })
6. }
7. </script>

复制代码

通知组件(ElNotification)用于全局系统提示，可自动消失或常驻。常用参数：title、message、type、duration(为0则不自动消失)、position(top-right等)、showClose。调用示例：

2. <script setup>
3. import { ElNotification } from 'element-plus'
4. function notify() {
5.   ElNotification({ title: '通知标题', message: '通知内容', type: 'success', duration: 3000, position: 'top-right' })
6. }
7. </script>
8. <template>
9.   <el-button @click="notify">弹出通知</el-button>
10. </template>

复制代码

四、数据承载组件

表格组件(el-table + el-table-column)用于展示大量数据。常用属性：data(数据源)、height(固定表头)、stripe(斑马纹)、border(边框)、highlight-current-row(高亮当前行)、show-summary(合计行)、span-method(合并行列)等。el-table-column常用属性：type(selection/index/expand)、prop(字段名)、label(列头)、width/min-width、fixed(固定列)、sortable(排序)、filter-method(过滤)等。基础示例：

2. <template>
3.   <div style="margin: 20px;">
4.     <el-table :data="tableData">
5.       <el-table-column prop="name" label="姓名"></el-table-column>
6.       <el-table-column prop="age" label="年龄"></el-table-column>
7.       <el-table-column prop="subject" label="科目"></el-table-column>
8.     </el-table>
9.   </div>
10. </template>
11. <script setup>
12. import { ref } from 'vue'
13. const tableData = [
14.   {name: '小王', age: 29, subject: 'Java'},
15.   {name: '小李', age: 30, subject: 'C++'},
16.   {name: '小张', age: 28, subject: 'JavaScript'}
17. ]

复制代码

导航菜单组件(el-menu、el-sub-menu、el-menu-item)提供顶部或侧边导航。mode属性可设置水平(horizontal)或竖直(vertical)。示例：

2. <el-menu mode="horizontal">
3.   <el-menu-item index="1">首页</el-menu-item>
4.   <el-sub-menu index="2">
5.     <template #title>广场</template>
6.     <el-menu-item index="2-1">音乐</el-menu-item>
7.     <el-menu-item index="2-2">视频</el-menu-item>
8.     <el-menu-item index="2-3">游戏</el-menu-item>
9.     <el-sub-menu index="2-4">
10.       <template #title>体育</template>
11.       <el-menu-item index="2-4-1">篮球</el-menu-item>
12.       <el-menu-item index="2-4-2">足球</el-menu-item>
13.       <el-menu-item index="2-4-3">排球</el-menu-item>
14.     </el-sub-menu>
15.   </el-sub-menu>
16.   <el-menu-item index="3" :disabled="true">个人中心</el-menu-item>
17.   <el-menu-item index="4">设置</el-menu-item>
18. </el-menu>

复制代码

el-menu还支持collapse(折叠，仅vertical模式)、background-color、text-color、active-text-color等样式属性。

以上示例覆盖了Element Plus中主要组件的核心用法，开发者可根据实际需求灵活配置属性，快速搭建功能完善的Vue3界面。

热心网友7

很实用的教程！对开关、滑块、选择器和提示类组件的属性梳理得很清楚，尤其是slider的format-tooltip和marks标记用法，直接就能用到项目里。另外想请教一下，el-switch的before-change回调在实际场景中一般用来做哪些判断？比如配合异步操作防止误触？