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-Cli 打包自动生成/抽离相关配置文件的实现方法

    基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。这篇文章主要介绍了基于Vue-Cli 打包自动生成/抽离相关配置文件 ,需要的朋友可以参考下
    2018-12-12
  • Vue 3 中动态赋值 ref 的应用示例解析

    Vue 3 中动态赋值 ref 的应用示例解析

    Vue3引入了Composition API,其中ref是核心概念,允许开发者声明响应式状态,本文通过一个具体示例,探讨了在Vue3中如何使用ref进行动态赋值,尤其是在处理DOM相关操作时的应用,通过ref动态赋值,可以有效管理组件内的状态,提高代码的可维护性和清晰度
    2024-09-09
  • Vue渲染失败的几种原因及解决方案

    Vue渲染失败的几种原因及解决方案

    这篇文章主要介绍了Vue渲染失败的几种原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 搭建Vue从Vue-cli到router路由护卫的实现

    搭建Vue从Vue-cli到router路由护卫的实现

    这篇文章主要介绍了搭建Vue从Vue-cli到router路由护卫的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue中组件传参的几种常用方法举例

    vue中组件传参的几种常用方法举例

    这篇文章主要给大家介绍了关于vue中组件传参的几种常用方法,Vue组件传参方也是面试最常考的内容,文中通过代码实例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 如何在vue中使用ant-design-vue组件

    如何在vue中使用ant-design-vue组件

    这篇文章主要介绍了如何在vue中使用ant-design-vue组件,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • vue项目如何实现Echarts在label中获取点击事件

    vue项目如何实现Echarts在label中获取点击事件

    这篇文章主要介绍了vue项目如何实现Echarts在label中获取点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue的watch和computed方法的使用及区别介绍

    Vue的watch和computed方法的使用及区别介绍

    Vue的watch属性可以用来监听data属性中数据的变化。这篇文章主要介绍了Vue的watch和computed方法的使用及区别,需要的朋友可以参考下
    2018-09-09
  • vue使用xlsx导入到表格中示例代码

    vue使用xlsx导入到表格中示例代码

    这篇文章主要介绍了vue使用xlsx导入到表格中代码,具体实现是先通过FileReader将上传的文件读取为二进制数据,然后使用xlsx将它解析成JSON数据,最后将JSON数据填充到表格中,需要的朋友可以参考下
    2023-11-11
  • Vue.directive自定义指令的使用详解

    Vue.directive自定义指令的使用详解

    本篇文章主要介绍了Vue.directive自定义指令的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03

最新评论