Element el-icon 图标组件详解

最新推荐文章于 2025-04-25 09:25:36 发布
最新推荐文章于 2025-04-25 09:25:36 发布
阅读量5.3w 收藏 27
点赞数 10
分类专栏： # 零基础Element 文章标签： Element 图标 el-icon
未经本人允许，请勿转载本人文章
本文链接：https://blog.csdn.net/woshisangsang/article/details/113246603
版权

点此查看全部文字教程、视频教程、源代码

本文目录

1. 背景

使用图标可以使我们的系统界面更加的炫酷美妙，Element也提供了一些常用的图标可以直接拿来使用。

2. 使用方式

第1种方式通过class样式使用，如下即显示了一个搜索图标。注意图标是以el-icon-开头的，后面的单词表示图标的含义。

 <i class="el-icon-search"></i>

此时同样可以将图标放入按钮中。

    <el-button type="primary"><i class="el-icon-search"></i>搜索</el-button>
    <el-link type="primary"><i class="el-icon-search"></i>搜索</el-link>

第2中方式是可以直接指定组件的icon属性，这种方式下组件的显示会更加标准好看，推荐使用这种方式。

    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-link type="primary" icon="el-icon-search">搜索</el-link>

以上代码效果如下：
在这里插入图片描述

3. 图标列表

可以从官网查询所有支持的图标：图标列表。

Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用 ＜el-icon＞ 组件图标（项目使用 Element Plus 内置图标不用再引入了）
王二红
09-08 7902
vue3elementplus图标组件el-icon，vue3elementplus组件库每次都需要import引入图标才能用吗，vue3elementplus图标组件如何不用引入就能使用，elementplusel-icon如何不引入直接使用，Vue3ElementPlus如何像ElementUI一样简单使用icon，ElementPlus怎么使用el-icon，elementplus图标使用详细教程，vue3全局注册elementplus图标库教程，vue3引用eleme
Vue3 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码
王二红
07-10 1万+
vue3，nuxt3，elementplus，表格，Table表格组件，el-table，拖曳排序，鼠标拖动排序，拖拽排序，改变表格行位置，鼠标拖动表格行row来交换位置，复杂表格，有下级的表格怎么拖曳排序，有二级下级的表格怎么拖曳排序，表格内的数据项拖拽排序，实现拖拽排序，详细教程，sortablejs，表格行拖拽，table表格行列动态拖拽，数据无法更新怎么办，表格太复杂怎么排序，排序后拿不到行数据id，排序后怎么对接后端服务器，能展开二级的行，排序后如何对接接口，拖拽移动，Vue3element
el-elementUI icon-font
MircoO的博客
05-31 5324
【代码】el-elementUI icon-font。
Element-ui和Element-plus获取所有icon
向梦想前进
07-30 1709
【代码】Element-ui和Element-plus获取所有icon。
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
最新发布
拖孩
04-25 1139
在上一篇文章中，我们借助自动化的精妙技艺，成功将.svg文件转化为 SVG Vue 组件，为组件库的宏伟蓝图添上浓墨重彩的一笔✨。接下来，让我们深度探索 icon 组件的测试、使用以及全局注册的实现。
el-icon 最新使用指南 SVG Icon @element-plus/icons-vue vue3 统一导入及注册el-icon组件 在各带图标组件中使用 component组件动态加载图标
Alloom的博客
08-05 4万+
2021.8.5 Element Plus 团队表示正在将原有组件内的 Font Icon 向 SVG Icon 迁移，正式版本Font Icon将被弃用，于是目标是对代码进行对应的更新，Font Icon换成SVG Icon。 文档：组件 | Element (element-plus.org) 注意：当前图标只适用于vue3。 首先更新 element-plus版本，指定安装@1.0.2-beta.69（2021.8.5时的最新版...
Element-Ui组件（二）Icon 图标
热门推荐
究极死胖兽的博客
06-03 26万+
Element-Ui组件（二）图标应用 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库，主要有以下2种用法： 设置类名el-icon-xxx，通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条： 示例代码 &l...
【Element-ui】Icon 图标与Button 按钮
m0_62599305的博客
12-02 3万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
Element-Ui组件（icon组件）
qq_65597930的博客
11-24 5824
除了内置图标，还支持自定义图标的引入和使用。引入自定义图标字体或 SVG 文件。在组件中进行注册和使用。例如：首先先画一个图标svg {width: 1em;在main.js中注册图标// 导入自定义图标// 全局注册自定义图标引用import CustomIcon from './path/to/custom-icon.vue' // 导入自定义图标。
iconCls和el-icon属性对应的图标大全（带图）
youtiantin的博客
12-12 7360
千言万语，不如直接上图效果好
【JavaScript源代码】Element el-button 按钮组件的使用详解.docx
12-28
- 对于图标按钮，可以结合使用 `icon` 属性和 Element UI 的内置图标类，或者自定义图标类。 - 按钮组件还可以与其他组件结合使用，例如加载状态、下拉菜单等，以实现更复杂的功能。 总的来说，Element UI 的 `el-...
关于element-icon的使用
冬雪
06-04 1695
element-icon的使用
element-icon 图标大全
qq_33060001的博客
09-23 1万+
{id:1,name:‘el-icon-platform-eleme’}, {id:2,name:‘el-icon-eleme’}, {id:3,name:‘el-icon-delete-solid’}, {id:4,name:‘el-icon-delete’}, {id:5,name:‘el-icon-s-tools’}, {id:6,name:‘el-icon-setting’}, {id:7,name:‘el-icon-user-solid’}, {id:8,name:‘el-icon-user’},
二次封装 el-icon
weixin_39415598的博客
04-06 765
theme: smartblue 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。 简介 点赞 + 关注 + 收藏 = 学会了 这是一篇对日常工作没什么帮助的文章~ 如果你还不太清楚 Element Plus 的 icon 是如何使用的，可以先阅读 《Element Plus 的 el-icon 到底怎么用》 Elemen...
Element UI 的el-button 内置那些icon图标
文都龙哥
06-22 2073
Element UI 内置的图标类名可以在 Element UI 的官方文档中找到。组件支持内置的图标，你可以通过设置。Element UI 的。
组件-Element---Icon（图标）
GU_AO_SHI_TAI_DU的博客
07-02 2055
组件-Element—Icon 组件—图标 使用方法 <i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> <el-button type="primary" icon="el-icon-s...
工作109:路由菜单项
歌谣的博客
11-12 230
/*各个路由模块的建立*/ import Home from "@/views/Home/Home"; import GlobalLayout from "@/layout/GlobalLayout"; import Login from "@/views/login/Login"; const SYSTEM_MANAGEMENT = "系统管理"; const SETTLEMENT_MANAGEMENT = "结算管理"; const DATAANALYSIS_MANAGEMENT="数据分析"; /.
vue3 动态加载el-icon图标
周家大小姐
05-28 1万+
安装插件 cnpm install @element-plus/icons main.js引入 import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import { store, key } from './store/index' import ElementPlus from 'element-plus' import 'element-plus/dis
<el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item>标签是什么写法
03-15
<think>好的，我现在需要解决用户关于Element UI的el-form-item中使用按钮的正确写法和功能实现的问题。用户提到了handleQuery和resetQuery方法，所以我应该重点放在表单中的按钮如何绑定这些方法，以及表单验证和重置的相关操作。 首先，我应该回忆Element UI的官方文档中关于el-form-item和按钮的部分。记得在el-form-item中可以放置各种表单控件，包括按钮。按钮通常使用el-button组件，而表单验证通常通过rules属性设置，并通过refs调用validate方法。 接下来，用户可能想知道如何在el-form-item中添加查询和重置按钮，并确保它们触发相应的方法。比如，查询按钮可能会触发表单验证，如果验证通过则提交数据；重置按钮可能需要调用resetFields方法来清空表单字段。 我需要考虑代码的结构，比如在el-form-item内部放置el-button，并为其绑定click事件处理函数。同时，要注意按钮的类型，比如查询按钮可能是primary类型，而重置按钮可能是default或info类型。 另外，用户提供的引用中提到了resetFields方法的使用，需要注意在调用resetFields之前可能需要等待DOM更新，使用$nextTick来确保表单引用正确。此外，如果某些字段不在表单的model中，可能需要手动重置，这也是需要注意的地方。 还需要考虑表单验证规则的设置，确保每个el-form-item的prop属性与model中的字段对应，这样rules才能正确应用。如果用户遇到验证不生效的问题，可能需要检查prop是否正确，或者是否在el-form上设置了正确的model和rules。 最后，要给出示例代码，展示正确的按钮用法，包括handleQuery和resetQuery方法的具体实现，以及如何在模板中绑定这些方法。同时，要提醒用户常见的注意事项，比如按钮类型、resetFields的局限性等。</think>### Element UI el-form-item 按钮用法详解 在Element UI的`el-form-item`中使用按钮需要结合表单验证和事件处理机制实现功能。以下是具体实现方法和示例代码： #### 1. 基础按钮结构 在`el-form-item`中放置按钮时，需配合`el-button`组件，并通过`@click`绑定事件： ```html <el-form-item> <el-button type="primary" @click="handleQuery">查询</el-button> <el-button @click="resetQuery">重置</el-button> </el-form-item> ``` #### 2. 功能实现示例 ```javascript export default { methods: { // 查询操作（带表单验证） handleQuery() { this.$refs.searchForm.validate(valid => { if (valid) { // 执行查询逻辑 this.fetchData() } }) }, // 重置操作 resetQuery() { this.$nextTick(() => { this.$refs.searchForm.resetFields() this.$emit('reset') // 可触发父组件事件 }) } } } ``` #### 3. 完整表单结构示例 ```html <el-form ref="searchForm" :model="formData" :rules="formRules"> <el-form-item label="名称" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery">查询</el-button> <el-button @click="resetQuery">重置</el-button> </el-form-item> </el-form> ``` #### 4. 关键配置说明 1. **验证规则配置**： ```javascript formRules: { name: [{ required: true, message: '请输入名称', trigger: 'blur' }] } ``` 2. **resetFields注意事项**： - 只会重置表单初始值，需确保`el-form`的`model`正确绑定[^2] - 需要等待DOM更新的情况应使用`$nextTick`[^2] 3. **按钮功能差异**： | 按钮类型 | 主要功能 | 相关方法 | |------------|------------------------------|----------------------| | 查询按钮 | 触发表单验证和提交 | validate() | | 重置按钮 | 重置表单值到初始状态 | resetFields() | #### 5. 常见问题处理 1. **按钮不生效**： - 检查`el-form`是否设置`ref`属性 - 确认`resetFields`调用在`$nextTick`中 2. **验证不触发**： - 确保`el-form-item`的`prop`与`model`字段匹配[^1] - 检查`rules`是否正确定义[^1] 3. **嵌套表格验证**： 当表单嵌套`el-table`时，需要使用动态prop规则[^3] ```html <el-table-column prop="price"> <template slot-scope="scope"> <el-form-item :prop="'items.' + scope.$index + '.price'"> <el-input v-model="scope.row.price"></el-input> </el-form-item> </template> </el-table-column> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员大阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值