我要评论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 下拉框自定义按钮内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论