el-select 的下拉框中新增俩自定义按钮的操作方法
作者：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 下拉框自定义按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！