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

2.解決思路
通過與element官網(wǎng)提供的數(shù)據(jù)對比后發(fā)現(xiàn),當(dāng)子級為空時(shí),后臺應(yīng)該不返回children這一層級了,前端暫時(shí)處理下數(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è)計(jì)原則',
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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問題時(shí),確保在圖像加載完成后再添加其他元素是關(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í)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
安裝node.js以及搭建vue項(xiàng)目過程中遇到的問題詳解
為了讓一些不太清楚搭建前端項(xiàng)目的小白,更快上手,下面這篇文章主要給大家介紹了關(guān)于安裝node.js以及搭建vue項(xiàng)目過程中遇到問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
karma+webpack搭建vue單元測試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例,這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05

