element中el-cascader級聯(lián)選擇器只有最后一級可以多選
更新時(shí)間：2024年01月15日 08:30:25 作者：小馬甲丫
本文主要介紹了element中el-cascader級聯(lián)選擇器只有最后一級可以多選，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、前言
element-ui中el-cascader級聯(lián)選擇器只有最后一級可以多選，其它級只有展開子節(jié)點(diǎn)的功能，如下圖所示：
可以觀察到最后一級的li節(jié)點(diǎn)上沒有屬性aria-haspopup="true"，可以通過這個(gè)來隱藏非最后一級節(jié)點(diǎn)的el-checkbox來解決此問題
二、實(shí)現(xiàn)
2.1、設(shè)置popper-class和multiple
設(shè)置屬性popper-class自定義浮層類名為popper-select，把props屬性中的multiple設(shè)置為true，開啟多選
<el-cascader
:options="options"
popper-class="popper-select"
:props="{
multiple: true
}"
/>
2.2、設(shè)置樣式
選中li屬性aria-haspopup為true的標(biāo)簽，隱藏此標(biāo)簽下的el-checkbox選擇框。
注意：
style標(biāo)簽中不要加scope
.popper-select {
li[aria-haspopup="true"] {
.el-checkbox {
display: none;
}
}
}
三、最后
到此這篇關(guān)于element中el-cascader級聯(lián)選擇器只有最后一級可以多選的文章就介紹到這了,更多相關(guān)element el-cascader級聯(lián)選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vuejs 制作背景淡入淡出切換動畫的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)原理this.$message實(shí)例詳解
這篇文章主要介紹了vue實(shí)現(xiàn)原理this.$message實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue項(xiàng)目中使用fontawesome圖標(biāo)庫的方法
fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫,主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對應(yīng)的圖標(biāo)庫,無須全部下載,對vue?fontawesome圖標(biāo)庫相關(guān)知識感興趣的朋友一起看看吧2023-12-12
vue3.0+vue-router+element-plus初實(shí)踐
這篇文章主要介紹了vue3.0+vue-router+element-plus初實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue實(shí)現(xiàn)編輯器鍵盤抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果
這篇文章主要介紹了vue實(shí)現(xiàn)編輯器鍵盤抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
本文介紹了Vue中使用Axios動態(tài)加載員工列表數(shù)據(jù),并通過async/await替代then/catch優(yōu)化代碼結(jié)構(gòu),同時(shí)詳解了Vue生命周期的8個(gè)階段及鉤子函數(shù)應(yīng)用場景,強(qiáng)調(diào)mounted鉤子用于初始化數(shù)據(jù)請求,感興趣的朋友跟隨小編一起看看吧2025-07-07
這篇文章主要給大家介紹如何在vue項(xiàng)目中設(shè)置首頁,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了vue 移動端記錄頁面瀏覽位置的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue 封裝防刷新考試倒計(jì)時(shí)組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue 封裝防刷新考試倒計(jì)時(shí)組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue綁定數(shù)字類型 value為數(shù)字的實(shí)例
這篇文章主要介紹了vue綁定數(shù)字類型 value為數(shù)字的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08