el-select 的下拉框中新增倆自定義按鈕的操作方法
更新時間：2024年11月22日 11:28:10 作者：qq_39016177
文章介紹了在Element UI的el-select組件中新增自定義按鈕的方法,并詳細(xì)說明了設(shè)置`popper-append-to-body`屬性為false的重要性,以及如何通過修改樣式來實現(xiàn)自定義按鈕的添加和樣式效果展示,感興趣的朋友跟隨小編一起看看吧
elementui 中 el-select 的下拉框中新增倆自定義按鈕
1.首先將popper-append-to-body屬性設(shè)置為false
如果不設(shè)置的話 在scoped 的樣式域中修改樣式不會起作用
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="請選擇組織架構(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è)置絕對定位
.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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件的實現(xiàn)方法
基于Vue-cli 項目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件 ,需要的朋友可以參考下2018-12-12
Vue?3?中動態(tài)賦值?ref?的應(yīng)用示例解析
Vue3引入了Composition?API,其中ref是核心概念,允許開發(fā)者聲明響應(yīng)式狀態(tài),本文通過一個具體示例,探討了在Vue3中如何使用ref進行動態(tài)賦值,尤其是在處理DOM相關(guān)操作時的應(yīng)用,通過ref動態(tài)賦值,可以有效管理組件內(nèi)的狀態(tài),提高代碼的可維護性和清晰度2024-09-09
這篇文章主要介紹了Vue渲染失敗的幾種原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)
這篇文章主要介紹了搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要給大家介紹了關(guān)于vue中組件傳參的幾種常用方法,Vue組件傳參方也是面試最?？嫉膬?nèi)容,文中通過代碼實例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
vue項目如何實現(xiàn)Echarts在label中獲取點擊事件
這篇文章主要介紹了vue項目如何實現(xiàn)Echarts在label中獲取點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue的watch和computed方法的使用及區(qū)別介紹
Vue的watch屬性可以用來監(jiān)聽data屬性中數(shù)據(jù)的變化。這篇文章主要介紹了Vue的watch和computed方法的使用及區(qū)別,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue使用xlsx導(dǎo)入到表格中代碼,具體實現(xiàn)是先通過FileReader將上傳的文件讀取為二進制數(shù)據(jù),然后使用xlsx將它解析成JSON數(shù)據(jù),最后將JSON數(shù)據(jù)填充到表格中,需要的朋友可以參考下2023-11-11
本篇文章主要介紹了Vue.directive自定義指令的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03