在Element UI中使用級(jí)聯(lián)選擇器,并且設(shè)置可以選擇任意一級(jí)的內(nèi)容
<el-cascader
v-model="selectedKeys"
<!-- options 指定數(shù)據(jù)源 -->
:options="options"
<!-- 懸浮級(jí)類上自動(dòng)展開(kāi) -->
:expand-trigger="'hover'"
style="width:100%"
<!-- 父級(jí)分類選擇項(xiàng)發(fā)生后觸發(fā)函數(shù) -->
@change="change"
<!-- 是否支持清空選項(xiàng) -->
clearable
<!-- checkStrictly可以選擇任意一級(jí)的內(nèi)容 -->
:props="{ checkStrictly: true }">
</el-cascader>
解決方案:
當(dāng)加入checkStrictly后就會(huì)出現(xiàn)單選框的問(wèn)題,修改樣式即可;這里使用的less語(yǔ)法,需要有l(wèi)ess依賴,加入樣式后如果沒(méi)有生效,可以放在App.vue中的樣式下文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-767335.html
<style lang="less">
.el-cascader-panel .el-radio {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 10px;
right: 10px;
}
.el-cascader-panel .el-radio__input {
visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
</style>
文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-767335.html
到了這里,關(guān)于Element UI 中使用el-cascader組件,可以選擇任意一級(jí)的內(nèi)容并取消單選框的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!