el-select 的下拉框中新增俩自定义按钮的操作方法

太湖边上

1. elementui 中 el-select 的下拉框中新增俩自定义按钮

复制代码

1.首先将popper-append-to-body属性设置为false

如果不设置的话 在scoped 的样式域中修改样式不会起作用

2.添加按钮

1. <el-form-item label="组织架构选择" class="org_class">
   
2.             <el-select
   
3.               :popper-append-to-body="false"
   
4.               collapse-tags
   
5.               multiple
   
6.               v-model="orgName"
   
7.               @change="userOrgName"
   
8.               placeholder="请选择组织架构"
   
9.             >
   
10.               <el-option
    
11.                 v-for="item in orgList"
    
12.                 :key="item.id"
    
13.                 :label="item.orgName"
    
14.                 :value="item.orgNo"
    
15.               >
    
16.               </el-option>
    
17.               <div class="button_report">
    
18.                 <el-button size="mini" type="success" class="all_select" @click="selectAllFun">
    
19.                   全选
    
20.                 </el-button>
    
21.                 <el-button size="mini" class="all_clear"> 清空 </el-button>
    
22.               </div>
    
23.             </el-select>
    
24.           </el-form-item>

复制代码

3.修改样式

1. <style scoped>
   
2.   .org_class >>> .el-scrollbar__bar.is-vertical {
   
3.     padding-bottom: 40px !important;
   
4.   }
   
5.   .org_class >>> .el-select-dropdown__wrap {
   
6.    padding-bottom: 40px !important;
   
7.   }
   
8.   按钮样式---需要设置绝对定位
   
9. .button_report {
   
10.   background-color: #ffffff;
    
11.   position: absolute;
    
12.   padding-top: 10px;
    
13.   display: flex;
    
14.   flex-direction: row;
    
15.   justify-content: center;
    
16.   padding-bottom: 10px;
    
17.   bottom: 0;
    
18.   left: 0;
    
19.   right: 0;
    
20.   .all_select {
    
21.     cursor: pointer;
    
22.   }
    
23.   .all_clear {
    
24.     cursor: pointer;
    
25.   }
    
26. }
    
27. </style>

复制代码

效果展示

到此这篇关于el-select 的下拉框中新增俩自定义按钮的文章就介绍到这了,更多相关el-select 下拉框自定义按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331211lqe.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！