el-select 的下拉框中新增俩自定义按钮的操作方法
更新时间:2024年11月22日 11:28:10 作者:qq_39016177
文章介绍了在Element UI的el-select组件中新增自定义按钮的方法,并详细说明了设置`popper-append-to-body`属性为false的重要性,以及如何通过修改样式来实现自定义按钮的添加和样式效果展示,感兴趣的朋友跟随小编一起看看吧
elementui 中 el-select 的下拉框中新增俩自定义按钮
1.首先将popper-append-to-body属性设置为false
如果不设置的话 在scoped 的样式域中修改样式不会起作用
2.添加按钮
<el-form-item label="组织架构选择" class="org_class"> <el-select :popper-append-to-body="false" collapse-tags multiple v-model="orgName" @change="userOrgName" placeholder="请选择组织架构" > <el-option v-for="item in orgList" :key="item.id" :label="item.orgName" :value="item.orgNo" > </el-option> <div class="button_report"> <el-button size="mini" type="success" class="all_select" @click="selectAllFun"> 全选 </el-button> <el-button size="mini" class="all_clear"> 清空 </el-button> </div> </el-select> </el-form-item>
3.修改样式
<style scoped> .org_class >>> .el-scrollbar__bar.is-vertical { padding-bottom: 40px !important; } .org_class >>> .el-select-dropdown__wrap { padding-bottom: 40px !important; } 按钮样式---需要设置绝对定位 .button_report { background-color: #ffffff; position: absolute; padding-top: 10px; display: flex; flex-direction: row; justify-content: center; padding-bottom: 10px; bottom: 0; left: 0; right: 0; .all_select { cursor: pointer; } .all_clear { cursor: pointer; } } </style>
效果展示
到此这篇关于el-select 的下拉框中新增俩自定义按钮的文章就介绍到这了,更多相关el-select 下拉框自定义按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue element ui Select选择器如何设置默认状态
这篇文章主要介绍了vue element ui Select选择器如何设置默认状态问题,具有很好的参考价值,希望对大家有所帮助,2023-10-10关于在vue 中使用百度ueEditor编辑器的方法实例代码
这篇文章主要介绍了在vue 中使用百度ueEditor编辑器的方法实例代码 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09vue.js中methods watch和computed的区别示例详解
methods,watch和computed都是以函数为基础的,但各自却都不同,这篇文章主要给大家介绍了关于vue.js中methods watch和computed区别的相关资料,需要的朋友可以参考下2021-08-08
最新评论