vue3 - elementPlus

官网： https://element-plus.org/zh-CN

安装

npm install element-plus --save

Element Plus 是项目运行时必须的 UI 组件库，最终会被打包到生产环境代码中，因此需要用 --save 安装（这也是 npm 5+ 版本的默认行为，可省略 --save）。

package.json

一、按钮 Button

全局导入

import { createApp } from 'vue'
	import ElementPlus from 'element-plus' //导入element-plus组件库
	import 'element-plus/dist/index.css' //导入element-plus CSS样式
	import App from './App.vue'

	const app = createApp(App)
	app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中
	app.mount('#app')

局部导入

<template>
  <el-button type="success">局部导入的按钮</el-button>
</template>

<script setup>
// 1. 导入 Button 组件和样式（如果未全局引入样式）
import { ElButton } from 'element-plus'
// 若全局未引入 ElementPlus 样式，需单独导入
// import 'element-plus/es/components/button/style/css'
</script>

<template>
    <h3>按钮</h3>
    <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>

    <hr>
    <h3>按钮属性</h3>
    <el-button plain>朴素按钮</el-button>
    <el-button round>圆角按钮</el-button>
    <el-button circle>圆</el-button>
    <el-button disabled>禁用按钮</el-button>
    <el-button loading>加载中</el-button>

    <hr>
    <h3>尺寸</h3>
    <el-button size="large">大型按钮</el-button>
    <el-button>默认按钮</el-button>
    <el-button size="small">小型按钮</el-button>
</template>

二、图标 Icon

https://element-plus.org/zh-CN/component/icon.html

全局注册

import { createApp } from 'vue'
// import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能
import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// app.use(createPinia())
app.use(router)
app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中

//注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

<template>
    <h3>图标</h3>
    <el-icon>
        <Plus />
    </el-icon>
    <el-icon>
        <Edit />
    </el-icon>
    <el-icon>
        <Delete />
    </el-icon>
    <el-icon class="is-loading">
        <Loading />
    </el-icon>

    <hr>
    <h3>属性</h3>
    <el-icon size="30" color="red">
        <Search />
    </el-icon>

    <hr>
    <h3>按钮</h3>
    <el-button type="primary">
        <el-icon>
            <Search />
        </el-icon>
        <span> 搜索 </span>
    </el-button>

    <el-button type="primary">
        <el-icon>
            <Search />
        </el-icon>
    </el-button>

    <el-button type="primary" circle>
        <el-icon>
            <Search />
        </el-icon>
    </el-button>

    <hr>
    <h3>按钮组</h3>
    <el-button-group>
        <el-button type="primary">
            <el-icon>
                <Plus />
            </el-icon>
        </el-button>

        <el-button type="primary">
            <el-icon>
                <Edit />
            </el-icon>
        </el-button>

        <el-button type="primary">
            <el-icon>
                <Delete />
            </el-icon>
        </el-button>
    </el-button-group>

</template>

<script lang="ts">


</script>

三、消息提示 ElMessage| ElMessageBox | ElNotification

https://element-plus.org/zh-CN/component/message.html

https://element-plus.org/zh-CN/component/message-box.html

https://element-plus.org/zh-CN/component/notification.html

<template>
    <el-button @click="openMsg">消息</el-button>
    <el-button @click="openConfirm">确认框</el-button>
    <el-button @click="openNotify">通知</el-button>
    <el-button @click="openNotify2">通知2</el-button>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

// 消息
const openMsg = () => {
    ElMessage({
        type: 'success', // success | warning | info | error
        message: '登录成功',
        showClose: true
    })
}

// 确认框
const openConfirm = () => {
    ElMessageBox.confirm('确认删除?', '标题', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
    }).then(() => {
        console.log('确认')
    }).catch(() => {
        console.log('取消')
    })
}

// 通知
const openNotify = () => {
    ElNotification({
        title: '标题',
        message: '你好？',
        duration: 1500 // 展示时间 [单位:毫秒]
    })
}

// 通知2
const openNotify2 = () => {
    ElNotification({
        type: 'success', // success | warning | info | error
        title: '标题',
        message: '你好',
        duration: 1500,
        position: 'bottom-right'
    })
}
</script>

四、导航 Menu

https://element-plus.org/zh-CN/component/menu.html

<script setup lang="ts">
import { ref } from 'vue'

//默认选中的菜单索引
//const selectedIndex = ref("2-2")
const selectedIndex = ref("3")

//选中菜单触发的回调
const selected = (index, indexPath) => {
    console.log("index", index, "indexPath", indexPath)
}
</script>

<template>

    <h3>水平导航</h3>
    <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected">
        <el-menu-item index="1">Home</el-menu-item>
        <el-sub-menu index="2">
            <template #title>我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>


    <h3>水平导航-自定义样式</h3>
    <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64"
        text-color="#fff" active-text-color="#ffd04b" style="height: 40px; width: 600px;">
        <el-menu-item index="1">Home</el-menu-item>
        <el-sub-menu index="2">
            <template #title>我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>

    <h3>垂直导航</h3><br>
    <el-menu :default-active="selectedIndex" @select="selected" style="width: 200px;">
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <Search />
                </el-icon>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="2">
            <el-icon>
                <Edit />
            </el-icon>
            <template #title>导航二</template>
        </el-menu-item>
        <el-menu-item index="3">
            <el-icon>
                <Delete />
            </el-icon>
            <template #title>导航三</template>
        </el-menu-item>
        <el-menu-item index="4">
            <el-icon>
                <Setting />
            </el-icon>
            <template #title>导航四</template>
        </el-menu-item>
    </el-menu>

    <h3>垂直导航-默认展开和自定义样式</h3>
    <el-menu :default-active="selectedIndex" @select="selected" :default-openeds="defaultOpeneds"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;">
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <Search />
                </el-icon>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="2">
            <el-icon>
                <Edit />
            </el-icon>
            <template #title>导航二</template>
        </el-menu-item>
        <el-sub-menu index="3">
            <template #title>
                <el-icon>
                    <Search />
                </el-icon>
                <span>导航三</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="4">
            <el-icon>
                <Setting />
            </el-icon>
            <template #title>导航四</template>
        </el-menu-item>
    </el-menu>

</template>

<style scoped></style>

<script setup lang="ts">
//用户执行的命令
const userCommand = (command) => { //点击菜单触发的回调
    console.log("command:", command)
}
</script>

<template>
    <h3>面包屑</h3>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item>订单</el-breadcrumb-item>
        <el-breadcrumb-item>我的工作台</el-breadcrumb-item>
    </el-breadcrumb>

    <h3>下拉菜单</h3><br>
    <el-dropdown @command="userCommand">
        <span>
            个人中心<el-icon>
                <User />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="order">订单</el-dropdown-item>
                <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>

</template>

<style scoped></style>

五、标签页 tab

https://element-plus.org/zh-CN/component/tabs.html

    <script setup>

    import { ref, reactive } from 'vue'

    //默认选中的标签名称
    const selectedName = ref("2")

    //选中标签触发的回调
    const tabClick = (tab, event) => {
        console.log("tab", tab.props, "event", event)
    }
</script>

<template>

    <h3>标签页</h3>
    <el-tabs v-model="selectedName" @tab-click="tabClick">
        <el-tab-pane label="home" name="1">内容1</el-tab-pane>
        <el-tab-pane label="news" name="2">内容2</el-tab-pane>
        <el-tab-pane label="about" name="3">内容3</el-tab-pane>
    </el-tabs>

    <h3>卡片风格</h3>
    <el-tabs v-model="selectedName" @tab-click="tabClick" type="card">
        <el-tab-pane label="home" name="a">内容1</el-tab-pane>
        <el-tab-pane label="news" name="b">内容2</el-tab-pane>
        <el-tab-pane label="about" name="b">内容3</el-tab-pane>
    </el-tabs>

    <h3>带有边框的卡片风格</h3>
    <el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
        <el-tab-pane label="home" name="A">内容1</el-tab-pane>
        <el-tab-pane label="news" name="B">内容2</el-tab-pane>
        <el-tab-pane label="about" name="C">内容3</el-tab-pane>
    </el-tabs>
</template>

    <script setup>

    import { ref, reactive } from 'vue'

    //默认选中的标签名称
    const selectedName = ref("2")

    const tab = reactive({
        arr: [
            { name: "1", title: 'Home', content: '内容1' },
            { name: "2", title: 'news', content: '内容2' },
            { name: "3", title: 'about', content: '内容3' },
        ]
    })

    //添加
    const tabAdd = () => {
        let index = tab.arr.length
        index++

        tab.arr.push({
            name: index,
            title: '新选项卡' + index,
            content: '内容' + index
        })
    }

    //移除
    const tabRemove = (name) => {
        console.log("name:", name)

        const index = tab.arr.findIndex((value) => {
            return value.name === name
        })

        tab.arr.splice(index, 1) //移除元素
    }

</script>

<template>
    <h3>动态添加</h3>
    <el-button @click="tabAdd">添加</el-button>

    <el-tabs v-model="selectedName" @tab-remove="tabRemove" closable type="card">
        <el-tab-pane v-for="(value, key) in tab.arr" :key="value.name" :label="value.title" :name="value.name">
            {{ value.content }}
        </el-tab-pane>
    </el-tabs>

</template>

六、输入框 Input

功能模块	关键属性 / 语法	用途说明
基础输入框	clearable	支持一键清空输入内容，适合表单场景
密码框	show-password	自带 “显示 / 隐藏密码” 切换按钮，无需自定义
文本域	type="textarea" + rows	多行输入，rows 控制默认高度
长度限制	maxlength + show-word-limit	限制输入字符数，show-word-limit 显示实时字数统计
尺寸控制	size="large/small"	快速切换输入框尺寸，适配不同 UI 风格
前置内容	<template #prepend>	在输入框左侧添加固定内容（如网址前缀）
后置内容	<template #append>	在输入框右侧添加固定内容（如邮箱后缀）
前置 + 后置组合	同时使用 #prepend 和 #append	构建完整的格式（如 https://xxx.com）
复合搜索框	前置 el-select + 后置 el-button	整合下拉筛选和搜索功能，适合复杂查询场景

    <template>
        <div style="width: 300px;">
            <!-- clearable 可一键清空 -->
            <h3>输入框</h3>
            <el-input v-model="name" clearable placeholder="请输入用户名" />

            <!-- show-password 可切换显示隐藏密码 -->
            <h3>密码框</h3>
            <el-input v-model="password" show-password placeholder="请输入密码" />

            <h3>文本域</h3>
            <el-input type="textarea" v-model="content" rows="2" />

            <h3>输入内容长度限制 - 输入框</h3>
            <el-input v-model="name" maxlength="10" show-word-limit />

            <h3>输入内容长度限制 - 文本域</h3>
            <el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />

            <h3>尺寸</h3>
            大 <el-input size="large" />
            默认 <el-input />
            小 <el-input size="small" />

            <h3>前置</h3>
            <el-input v-model="url">
                <template #prepend>https://</template>
            </el-input>

            <h3>后置</h3>
            <el-input v-model="email">
                <template #append>@qq.com</template>
            </el-input>

            <h3>前置后置</h3>
            <el-input v-model="url2">
                <template #prepend>https://</template>
                <template #append>.com</template>
            </el-input>

            <h3>前置后置扩展 - 搜索</h3>
            <el-input placeholder="请输入课程名称">
                <template #prepend>
                    <el-select v-model="selected" placeholder="请选择" style="width: 100px;">
                        <el-option label="前端" value="1" />
                        <el-option label="后端" value="2" />
                        <el-option label="服务端" value="3" />
                    </el-select>
                </template>
                <template #append>
                    <el-button>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </el-button>
                </template>
            </el-input>
        </div>
    </template>

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

// 数据模型
const name = ref('')
const password = ref('')
const content = ref('你好')
const url = ref('ww.baidu.com')
const url2 = ref('qq')
const email = ref('123456')
const selected = ref('2') // 默认选中的下拉框值
</script>

<style scoped></style>

七、radio 单选框和

https://element-plus.org/zh-CN/component/radio.html

<template>
    <div class="radio-demo-container">
        <h2 class="page-title">Element Plus Radio 单选框组件示例</h2>

        <!-- 基础用法 -->
        <div class="demo-card">
            <h3 class="demo-title">1. 基础用法</h3>
            <div class="demo-content">
                <el-radio v-model="radio1" label="1">选项 1</el-radio>
                <el-radio v-model="radio1" label="2">选项 2</el-radio>
                <p class="demo-tip">当前选中值: {{ radio1 }}</p>
            </div>
        </div>

        <!-- 禁用状态 -->
        <div class="demo-card">
            <h3 class="demo-title">2. 禁用状态</h3>
            <div class="demo-content">
                <el-radio v-model="radio2" label="1" disabled>禁用选项 1</el-radio>
                <el-radio v-model="radio2" label="2">正常选项 2</el-radio>
            </div>
        </div>

        <!-- 按钮样式 -->
        <div class="demo-card">
            <h3 class="demo-title">3. 按钮样式</h3>
            <div class="demo-content">
                <el-radio-group v-model="radio3">
                    <el-radio-button label="1">选项 1</el-radio-button>
                    <el-radio-button label="2">选项 2</el-radio-button>
                    <el-radio-button label="3">选项 3</el-radio-button>
                </el-radio-group>
                <p class="demo-tip">当前选中值: {{ radio3 }}</p>
            </div>
        </div>

        <!-- 按钮样式带边框 -->
        <div class="demo-card">
            <h3 class="demo-title">4. 按钮样式带边框</h3>
            <div class="demo-content">
                <el-radio-group v-model="radio4" border>
                    <el-radio-button label="1">选项 1</el-radio-button>
                    <el-radio-button label="2">选项 2</el-radio-button>
                    <el-radio-button label="3">选项 3</el-radio-button>
                </el-radio-group>
            </div>
        </div>

        <!-- 按钮样式禁用 -->
        <div class="demo-card">
            <h3 class="demo-title">5. 按钮样式禁用</h3>
            <div class="demo-content">
                <el-radio-group v-model="radio5">
                    <el-radio-button label="1">选项 1</el-radio-button>
                    <el-radio-button label="2" disabled>禁用选项 2</el-radio-button>
                    <el-radio-button label="3">选项 3</el-radio-button>
                </el-radio-group>
            </div>
        </div>

        <!-- 横向排列 -->
        <div class="demo-card">
            <h3 class="demo-title">6. 横向排列</h3>
            <div class="demo-content">
                <el-radio-group v-model="radio6" size="large">
                    <el-radio label="1">大型</el-radio>
                    <el-radio label="2">中型</el-radio>
                    <el-radio label="3">小型</el-radio>
                </el-radio-group>
            </div>
        </div>

        <!-- 纵向排列 -->
        <div class="demo-card">
            <h3 class="demo-title">7. 纵向排列</h3>
            <div class="demo-content">
                <el-radio-group v-model="radio7" direction="vertical">
                    <el-radio label="1">选项 1</el-radio>
                    <el-radio label="2">选项 2</el-radio>
                    <el-radio label="3">选项 3</el-radio>
                </el-radio-group>
            </div>
        </div>

        <!-- 带尺寸 -->
        <div class="demo-card">
            <h3 class="demo-title">8. 不同尺寸</h3>
            <div class="demo-content">
                <div class="size-group">
                    <div class="size-item">
                        <span class="size-label">大尺寸：</span>
                        <el-radio-group v-model="radio8" size="large">
                            <el-radio label="1">选项 1</el-radio>
                            <el-radio label="2">选项 2</el-radio>
                        </el-radio-group>
                    </div>

                    <div class="size-item">
                        <span class="size-label">默认尺寸：</span>
                        <el-radio-group v-model="radio8">
                            <el-radio label="1">选项 1</el-radio>
                            <el-radio label="2">选项 2</el-radio>
                        </el-radio-group>
                    </div>

                    <div class="size-item">
                        <span class="size-label">小尺寸：</span>
                        <el-radio-group v-model="radio8" size="small">
                            <el-radio label="1">选项 1</el-radio>
                            <el-radio label="2">选项 2</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>

        <!-- 带边框 -->
        <div class="demo-card">
            <h3 class="demo-title">9. 带边框</h3>
            <div class="demo-content">
                <el-radio v-model="radio9" label="1" border>选项 1</el-radio>
                <el-radio v-model="radio9" label="2" border>选项 2</el-radio>
            </div>
        </div>

        <!-- 事件监听 -->
        <div class="demo-card">
            <h3 class="demo-title">10. 事件监听</h3>
            <div class="demo-content">
                <el-radio-group v-model="radio10" @change="handleChange">
                    <el-radio label="1">选项 1</el-radio>
                    <el-radio label="2">选项 2</el-radio>
                    <el-radio label="3">选项 3</el-radio>
                </el-radio-group>
                <p class="demo-tip" v-if="changeLog">{{ changeLog }}</p>
            </div>
        </div>

        <!-- 颜色自定义 -->
        <div class="demo-card">
            <h3 class="demo-title">11. 自定义颜色</h3>
            <div class="demo-content">
                <el-radio-group @change="handleChange" v-model="radioVal">
                    <el-radio label="1" class="custom-radio-purple">紫色选项</el-radio>
                    <el-radio label="2">绿色选项</el-radio>
                    <el-radio label="3">红色选项</el-radio>
                </el-radio-group>
            </div>
        </div>
    </div>
</template>

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

// 数据模型
const radio1 = ref('1')       // 基础用法
const radio2 = ref('2')       // 禁用状态
const radio3 = ref('1')       // 按钮样式
const radio4 = ref('2')       // 按钮样式带边框
const radio5 = ref('1')       // 按钮样式禁用
const radio6 = ref('2')       // 横向排列
const radio7 = ref('1')       // 纵向排列
const radio8 = ref('1')       // 不同尺寸
const radio9 = ref('1')       // 带边框
const radio10 = ref('1')      // 事件监听
const radioVal = ref('1')      // 自定义颜色

// 事件处理
const changeLog = ref('')
const handleChange = (val) => {
    // 确保 val 是有效的值
    if (val !== undefined && val !== null) {
        changeLog.value = `选中值已变更为: ${val}`
        ElMessage.success(`已选择选项 ${val}`)
    }
}

// 引入样式
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/el-message.css'
</script>

<style scoped>
:deep(.custom-radio-purple .el-radio__input.is-checked .el-radio__inner) {
    border-color: #6200ee !important;
    background-color: #6200ee !important;
    /* 控制选中圆点 */

}

:deep(.custom-radio-purple .el-radio__input.is-checked + .el-radio__label) {
    color: #6200ee;
    /* 文本颜色 */
}
</style>

八、checkbox 复选框

https://element-plus.org/zh-CN/component/checkbox.html

九、下拉选项

<template>
    <div style="width: 400px; margin: 20px;">
        <h2>Select 选择器示例</h2>

        <!-- 基础用法 -->
        <div style="margin-bottom: 20px;">
            <h3>1. 基础用法</h3>
            <el-select v-model="value1" placeholder="请选择">
                <el-option label="黄金糕" value="1"></el-option>
                <el-option label="双皮奶" value="2"></el-option>
                <el-option label="蚵仔煎" value="3"></el-option>
                <el-option label="龙须面" value="4"></el-option>
                <el-option label="北京烤鸭" value="5"></el-option>
            </el-select>
        </div>

        <!-- 禁用状态 -->
        <div style="margin-bottom: 20px;">
            <h3>2. 禁用状态</h3>
            <el-select v-model="value2" disabled placeholder="请选择">
                <el-option label="黄金糕" value="1"></el-option>
                <el-option label="双皮奶" value="2"></el-option>
            </el-select>
        </div>

        <!-- 禁用选项 -->
        <div style="margin-bottom: 20px;">
            <h3>3. 禁用选项</h3>
            <el-select v-model="value3" placeholder="请选择">
                <el-option label="黄金糕" value="1"></el-option>
                <el-option label="双皮奶" value="2" disabled></el-option>
                <el-option label="蚵仔煎" value="3"></el-option>
            </el-select>
        </div>

        <!-- 可清空 -->
        <div style="margin-bottom: 20px;">
            <h3>4. 可清空</h3>
            <el-select v-model="value4" clearable placeholder="请选择">
                <el-option label="黄金糕" value="1"></el-option>
                <el-option label="双皮奶" value="2"></el-option>
                <el-option label="蚵仔煎" value="3"></el-option>
            </el-select>
        </div>

        <!-- 多选 -->
        <div style="margin-bottom: 20px;">
            <h3>5. 多选</h3>
            <el-select v-model="value5" multiple placeholder="请选择">
                <el-option label="黄金糕" value="1"></el-option>
                <el-option label="双皮奶" value="2"></el-option>
                <el-option label="蚵仔煎" value="3"></el-option>
                <el-option label="龙须面" value="4"></el-option>
                <el-option label="北京烤鸭" value="5"></el-option>
            </el-select>
        </div>

        <!-- 分组 -->
        <div style="margin-bottom: 20px;">
            <h3>6. 分组</h3>
            <el-select v-model="value6" placeholder="请选择">
                <el-option-group label="热门城市">
                    <el-option label="北京" value="Beijing"></el-option>
                    <el-option label="上海" value="Shanghai"></el-option>
                </el-option-group>
                <el-option-group label="其他城市">
                    <el-option label="南京" value="Nanjing"></el-option>
                    <el-option label="杭州" value="Hangzhou"></el-option>
                    <el-option label="成都" value="Chengdu"></el-option>
                </el-option-group>
            </el-select>
        </div>

        <!-- 带搜索框 -->
        <div style="margin-bottom: 20px;">
            <h3>7. 带搜索框</h3>
            <el-select v-model="value7" filterable placeholder="请选择">
                <el-option label="黄金糕" value="1"></el-option>
                <el-option label="双皮奶" value="2"></el-option>
                <el-option label="蚵仔煎" value="3"></el-option>
                <el-option label="龙须面" value="4"></el-option>
                <el-option label="北京烤鸭" value="5"></el-option>
            </el-select>
        </div>

        <!-- 尺寸 -->
        <div style="margin-bottom: 20px;">
            <h3>8. 不同尺寸</h3>
            <div>
                <el-select v-model="value8" size="large" placeholder="large">
                    <el-option label="黄金糕" value="1"></el-option>
                </el-select>
            </div>
            <div style="margin-top: 10px;">
                <el-select v-model="value8" placeholder="default">
                    <el-option label="黄金糕" value="1"></el-option>
                </el-select>
            </div>
            <div style="margin-top: 10px;">
                <el-select v-model="value8" size="small" placeholder="small">
                    <el-option label="黄金糕" value="1"></el-option>
                </el-select>
            </div>
        </div>

        <!-- 可创建 -->
        <div style="margin-bottom: 20px;">
            <h3>9. 可创建选项</h3>
            <el-select v-model="value9" filterable allow-create default-first-option placeholder="请选择或输入">
                <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>

        <!-- 自定义模板 -->
        <div style="margin-bottom: 20px;">
            <h3>10. 自定义模板</h3>
            <el-select v-model="value10" placeholder="请选择">
                <el-option v-for="user in users" :key="user.value" :value="user.value">
                    <div style="display: flex; align-items: center;">
                        <img :src="user.avatar" style="width: 24px; height: 24px; margin-right: 8px;" alt="用户头像">
                        <span>{{ user.label }}</span>
                    </div>
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElSelect, ElOption, ElOptionGroup } from 'element-plus'
import 'element-plus/dist/index.css'

// 基础用法
const value1 = ref('')

// 禁用状态
const value2 = ref('')

// 禁用选项
const value3 = ref('')

// 可清空
const value4 = ref('')

// 多选
const value5 = ref([])

// 分组
const value6 = ref('')

// 带搜索框
const value7 = ref('')

// 尺寸
const value8 = ref('')

// 可创建选项
const value9 = ref('')
const cities = ref([
    { label: '北京', value: 'Beijing' },
    { label: '上海', value: 'Shanghai' },
    { label: '广州', value: 'Guangzhou' },
    { label: '深圳', value: 'Shenzhen' }
])

// 自定义模板
const value10 = ref('')
const users = ref([
    {
        value: '1',
        label: '王小虎',
        avatar: 'https://picsum.photos/id/1005/200'
    },
    {
        value: '2',
        label: '张三',
        avatar: 'https://picsum.photos/id/1012/200'
    },
    {
        value: '3',
        label: '李四',
        avatar: 'https://picsum.photos/id/1025/200'
    }
])
</script>

<style scoped>
h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}
</style>

十、date-picker/datetime-picker日期控件

https://element-plus.org/zh-CN/component/date-picker.html

https://element-plus.org/zh-CN/component/datetime-picker.html

https://element-plus.org/zh-CN/component/date-picker-panel.html 2.11.0

    <script setup>
    import { ref } from 'vue'

    const date = ref('')

    const dateChange = (val) => {
        console.log("dateChange:", val)
    }
</script>

    <template>
        <h3>日期</h3>
        <el-date-picker v-model="date" type="date" placeholder="请选择" />

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

        <h3>事件绑定</h3>
        <el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" @change="dateChange" />
    </template>

<style scoped></style>

十一、Form 表单

最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。

在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。

<script setup>
import { ref } from 'vue'

const data = ref({
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
})

const add = () => {
    console.log(data.value)
}

const reset = () => {
    data.value = {
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    }
}
</script>

<template>
    <el-form :model="data" label-width="80" style="width: 400px;">
        <el-form-item label="文本框">
            <el-input v-model="data.name" placeholder="请填写名称" />
        </el-form-item>

        <el-form-item label="单选框">
            <el-radio-group v-model="data.radio">
                <el-radio value="1">前端</el-radio>
                <el-radio value="2">后端</el-radio>
                <el-radio value="3">服务端</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="复选框">
            <el-checkbox-group v-model="data.checkbox">
                <el-checkbox value="a">前端</el-checkbox>
                <el-checkbox value="b">后端</el-checkbox>
                <el-checkbox value="c">服务端</el-checkbox>
            </el-checkbox-group>
        </el-form-item>

        <el-form-item label="日期时间">
            <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>

        <el-form-item label="下拉框">
            <el-select v-model="data.select" placeholder="请选择">
                <el-option value="A" label="前端" />
                <el-option value="B" label="后端" />
                <el-option value="C" label="服务端" />
            </el-select>
        </el-form-item>

        <el-form-item label="多选框">
            <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                <el-option value="AA" label="前端" />
                <el-option value="BB" label="后端" />
                <el-option value="CC" label="服务端" />
            </el-select>
        </el-form-item>

        <el-form-item label="文本域">
            <el-input type="textarea" v-model="data.textarea" :rows="2" placeholder="请填写内容" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="add">添加</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped></style>

{
    "name": "abc",
    "radio": "1",
    "checkbox": [
        "b",
        "c"
    ],
    "date": "2025-09-03 00:00:00",
    "select": "C",
    "multipleSelect": [
        "AA",
        "BB",
        "CC"
    ],
    "textarea": "aaaa"
}

十二、对话框

基础用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为两个部分：body 和 footer，footer 需要具名为 footer 的 slot。 title 属性用于定义标题，它是可选的，默认值为空。 最后，本例还展示了 before-close 的用法。

<template>
  <el-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

:before-close="handleClose"

before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

案例：

<script setup>
import { ref } from 'vue'

const data = ref({
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
})

const add = () => {
    console.log(data.value)
}

const reset = () => {
    data.value = {
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    }
}

//对话框
const dialog = ref(false)

const dialogClose = () => {
    console.log("关闭")
}
</script>

<template>
    <el-button @click="dialog = true">打开</el-button>

    <!-- draggable 允许拖拽 -->
    <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
        <el-form label-width="80">
            <el-form-item label="文本框">
                <el-input v-model="data.name" placeholder="请填写名称" />
            </el-form-item>

            <el-form-item label="单选框">
                <el-radio-group v-model="data.radio">
                    <el-radio value="1">前端</el-radio>
                    <el-radio value="2">后端</el-radio>
                    <el-radio value="3">服务端</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="复选框">
                <el-checkbox-group v-model="data.checkbox">
                    <el-checkbox value="a">前端</el-checkbox>
                    <el-checkbox value="b">后端</el-checkbox>
                    <el-checkbox value="c">服务端</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="日期时间">
                <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <el-form-item label="下拉框">
                <el-select v-model="data.select" placeholder="请选择">
                    <el-option value="A" label="前端" />
                    <el-option value="B" label="后端" />
                    <el-option value="C" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="多选框">
                <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                    <el-option value="AA" label="前端" />
                    <el-option value="BB" label="后端" />
                    <el-option value="CC" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="文本域">
                <el-input type="textarea" v-model="data.textarea" :rows="2" placeholder="请填写内容" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">添加</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>