快捷導(dǎo)航

el-select 的下拉框中新增倆自定義按鈕的操作方法

更新時(shí)間：2024年11月22日 11:28:10 作者：qq_39016177

文章介紹了在Element UI的el-select組件中新增自定義按鈕的方法,并詳細(xì)說(shuō)明了設(shè)置`popper-append-to-body`屬性為false的重要性,以及如何通過(guò)修改樣式來(lái)實(shí)現(xiàn)自定義按鈕的添加和樣式效果展示,感興趣的朋友跟隨小編一起看看吧

1.首先將popper-append-to-body屬性設(shè)置為false

如果不設(shè)置的話在scoped 的樣式域中修改樣式不會(huì)起作用

2.添加按鈕

 <el-form-item label="組織架構(gòu)選擇" class="org_class">
            <el-select
              :popper-append-to-body="false"
              collapse-tags
              multiple
              v-model="orgName"
              @change="userOrgName"
              placeholder="請(qǐng)選擇組織架構(gòu)"
            >
              <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;
  }
  按鈕樣式---需要設(shè)置絕對(duì)定位
.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>

效果展示

到此這篇關(guān)于el-select 的下拉框中新增倆自定義按鈕的文章就介紹到這了,更多相關(guān)el-select 下拉框自定義按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue包大小優(yōu)化的實(shí)現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實(shí)現(xiàn)(從1.72M到94K)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
Vue3?＜script?setup?lang=“ts“＞?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時(shí)語(yǔ)法糖，本文主要講解<script setup>?與?TypeScript?的基本使用，感興趣的朋友跟隨小編一起看看吧
2022-12-12
Vue3實(shí)現(xiàn)word轉(zhuǎn)成pdf代碼的方法
在Vue 3中,前端無(wú)法直接將Word文檔轉(zhuǎn)換為PDF,因?yàn)閃ord文檔的解析和PDF的生成通常需要在后端進(jìn)行這篇文章主要介紹了Vue3實(shí)現(xiàn)word轉(zhuǎn)成pdf代碼的方法,需要的朋友可以參考下,
2023-07-07
vue中如何使用vue-touch插件
這篇文章主要介紹了vue中使用vue-touch插件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
VUE中v-model和v-for指令詳解
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能的相關(guān)資料,開(kāi)發(fā)中我們需要地圖定位,就是用戶輸入位置,自動(dòng)定位獲取經(jīng)緯度,需要的朋友可以參考下
2023-08-08
Vue指令詳解之v-if與v-show的對(duì)比與常見(jiàn)應(yīng)用分析
Vue提供了v-if和v-show兩個(gè)指令來(lái)實(shí)現(xiàn)條件渲染,雖然它們都能控制元素的顯示與隱藏,但在實(shí)現(xiàn)機(jī)制和使用場(chǎng)景上有著顯著差異,本文將深入探討這兩個(gè)指令的工作原理、性能特點(diǎn)以及適用場(chǎng)景,幫助開(kāi)發(fā)者在實(shí)際項(xiàng)目中做出合理選擇,感興趣的朋友跟隨小編一起看看吧
2025-09-09
vue2.0 中#$emit,$on的使用詳解
這篇文章主要介紹了vue2.0 中#$emit,$on的使用詳解,需要的朋友可以參考下
2017-06-06