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包大小优化的实现(从1.72M到94K)

    Vue包大小优化的实现(从1.72M到94K)

    这篇文章主要介绍了Vue包大小优化的实现(从1.72M到94K),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Vue3 <script setup lang=“ts“> 的基本使用

    Vue3 <script setup lang=“ts“> 的基本使用

    <script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖,本文主要讲解<script setup> 与 TypeScript 的基本使用,感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • Vue3实现word转成pdf代码的方法

    Vue3实现word转成pdf代码的方法

    在Vue 3中,前端无法直接将Word文档转换为PDF,因为Word文档的解析和PDF的生成通常需要在后端进行这篇文章主要介绍了Vue3实现word转成pdf代码的方法,需要的朋友可以参考下,
    2023-07-07
  • vue中如何使用vue-touch插件

    vue中如何使用vue-touch插件

    这篇文章主要介绍了vue中使用vue-touch插件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • VUE中v-model和v-for指令详解

    VUE中v-model和v-for指令详解

    本篇文章主要介绍了VUE中v-model和v-for指令详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue实现将数据存入vuex中以及从vuex中取出数据

    vue实现将数据存入vuex中以及从vuex中取出数据

    今天小编就为大家分享一篇vue实现将数据存入vuex中以及从vuex中取出数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

    element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

    这篇文章主要介绍了element-plus 在vue3 中不生效的原因解决方法(element-plus引入),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue项目接入高德地图点击地图获取经纬度以及省市区功能

    vue项目接入高德地图点击地图获取经纬度以及省市区功能

    这篇文章主要给大家介绍了关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的相关资料,开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,需要的朋友可以参考下
    2023-08-08
  • Vue指令详解之v-if与v-show的对比与常见应用分析

    Vue指令详解之v-if与v-show的对比与常见应用分析

    Vue提供了v-if和v-show两个指令来实现条件渲染,虽然它们都能控制元素的显示与隐藏,但在实现机制和使用场景上有着显著差异,本文将深入探讨这两个指令的工作原理、性能特点以及适用场景,帮助开发者在实际项目中做出合理选择,感兴趣的朋友跟随小编一起看看吧
    2025-09-09
  • vue2.0 中#$emit,$on的使用详解

    vue2.0 中#$emit,$on的使用详解

    这篇文章主要介绍了vue2.0 中#$emit,$on的使用详解,需要的朋友可以参考下
    2017-06-06

最新评论