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数组的劫持逐步分析讲解

    Vue数组的劫持逐步分析讲解

    小编这次要给大家分享的是如何实现vue2.x数组劫持,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获
    2023-01-01
  • vue element ui Select选择器如何设置默认状态

    vue element ui Select选择器如何设置默认状态

    这篇文章主要介绍了vue element ui Select选择器如何设置默认状态问题,具有很好的参考价值,希望对大家有所帮助,
    2023-10-10
  • 关于在vue 中使用百度ueEditor编辑器的方法实例代码

    关于在vue 中使用百度ueEditor编辑器的方法实例代码

    这篇文章主要介绍了在vue 中使用百度ueEditor编辑器的方法实例代码 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue 实现特定条件下绑定事件

    vue 实现特定条件下绑定事件

    今天小编就为大家分享一篇vue 实现特定条件下绑定事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • ant-design-vue 快速避坑指南(推荐)

    ant-design-vue 快速避坑指南(推荐)

    ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致,很多朋友在使用过程中遇到很多问题,今天小编就给大家分享一篇教程帮助大家快速闭坑,一起看看吧
    2020-01-01
  • vue.js中methods watch和computed的区别示例详解

    vue.js中methods watch和computed的区别示例详解

    methods,watch和computed都是以函数为基础的,但各自却都不同,这篇文章主要给大家介绍了关于vue.js中methods watch和computed区别的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue移动端实现pdf/excel/图片在线预览

    Vue移动端实现pdf/excel/图片在线预览

    这篇文章主要为大家详细介绍了Vue移动端实现pdf/excel/图片在线预览功能的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考下
    2024-04-04
  • vue中的计算属性和侦听属性

    vue中的计算属性和侦听属性

    这篇文章主要介绍了vue中的计算属性和侦听属性,帮助大家更好的理解和学习vue框架的使用,感兴趣的朋友可以了解下
    2020-11-11
  • 浅谈Vue3 父子传值

    浅谈Vue3 父子传值

    这篇文章主要介绍了基于Vue中的父子传值问题解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-10-10
  • vue打包后dist文件在本地启动运行的步骤

    vue打包后dist文件在本地启动运行的步骤

    这篇文章主要给大家介绍了关于vue打包后dist文件在本地启动运行的简单步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考价值,需要的朋友可以参考下
    2023-09-09

最新评论