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>

效果展示