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)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問題時,確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問題,也為未來的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧2024-07-07vue 自動檢測手機(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-07antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10安裝node.js以及搭建vue項(xiàng)目過程中遇到的問題詳解
為了讓一些不太清楚搭建前端項(xiàng)目的小白,更快上手,下面這篇文章主要給大家介紹了關(guān)于安裝node.js以及搭建vue項(xiàng)目過程中遇到問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06karma+webpack搭建vue單元測試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例,這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05