el-button按钮大小不一致解决方案

最新推荐文章于 2025-06-17 15:10:17 发布

qickcao

最新推荐文章于 2025-06-17 15:10:17 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qickcao/article/details/129272741

vue 专栏收录该内容

2 篇文章

订阅专栏

文章讲述了在使用El-Form时遇到的问题，即设置了size=mini后，按钮的图标大小仍然不统一。解决方案是通过添加自定义的CSS样式，特别是针对.i标签设置font-size为15px，以实现图标大小的统一。添加样式时注意使用scoped防止影响其他组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我使用了外部的icon，尽管在el-form设置了 size=mini，但是按钮大小不统一
源代码如下：

<el-form 
              :inline="true" 
              :model="searchForm" 
              class="demo-form-inline" 
              size="small"
              @keyup.enter.native="search">
                  <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
                  <el-button icon="el-icon-search" type="primary" @click="handlerLeave">离职人员查询</el-button>
                  <el-button type="primary" @click="handlerRoleManager"><i class="iconfont icon-ziyuanxhdpi"></i>&nbsp;&nbsp;职位管理</el-button>
                  <!-- <div>
                    重要提示：<br> 
                    &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red;">新增人员默认密码为123456,请及时修改</span>
                  </div> -->
                </el-form-item>
              </el-form>

显示结果在这里插入图片描述只需要修改 i 标签的 css样式就可以了

// 别忘记scoped，不然其他组件会被污染
<style scoped>
/* 这行代码修改i样式 */
.el-button /deep/ i {
  font-size: 15px;
}
</style>

结果展示
在这里插入图片描述