vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
1.遇到的問題
級聯(lián)選擇器,發(fā)現(xiàn)每個層級的最后一層總是顯示為無數(shù)據(jù)。
預(yù)期效果為,當(dāng)無數(shù)據(jù)時,應(yīng)該不能點(diǎn)擊展開。

2.解決思路
通過與element官網(wǎng)提供的數(shù)據(jù)對比后發(fā)現(xiàn),當(dāng)子級為空時,后臺應(yīng)該不返回children這一層級了,前端暫時處理下數(shù)據(jù)。
// 格式化數(shù)據(jù)源
this.options = this.formatData(data)
// 格式化數(shù)據(jù),遞歸將空的children置為undefined
formatData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
data[i].children = undefined
} else {
this.formatData(data[i].children)
}
}
return data
}3.完整代碼
<template>
<div class="white-body-view">
<el-cascader v-model="value" :options="options" />
</div>
</template>
<script>
export default {
data() {
return {
options: [],
value: ''
}
},
created() {
this.initData()
},
methods: {
initData() {
const data = [
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '設(shè)計原則',
children: []
}, {
value: 'daohang',
label: '導(dǎo)航',
children: []
}]
},
{
value: 'ziyuan',
label: '資源',
children: []
}]
this.options = this.formatData(data)
},
formatData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
data[i].children = undefined
} else {
this.formatData(data[i].children)
}
}
return data
}
}
}
</script>總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問題時,確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問題,也為未來的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧2024-07-07
vue 自動檢測手機(jī)端響應(yīng)式布局的五種實(shí)現(xiàn)
本文主要介紹了vue自動檢測手機(jī)端響應(yīng)式布局,可以通過結(jié)合 CSS 媒體查詢、Vue 的動態(tài)數(shù)據(jù)綁定、適當(dāng)?shù)牡谌綆?、PostCSS 插件以及正確的視口設(shè)置實(shí)現(xiàn),感興趣的可以了解一下2024-07-07
antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
karma+webpack搭建vue單元測試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例,這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05

