vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
更新時間：2023年10月09日 09:03:17 作者：王博wangbo
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1.遇到的問題
級聯(lián)選擇器，發(fā)現(xiàn)每個層級的最后一層總是顯示為無數(shù)據(jù)。
預(yù)期效果為，當無數(shù)據(jù)時，應(yīng)該不能點擊展開。
2.解決思路
通過與element官網(wǎng)提供的數(shù)據(jù)對比后發(fā)現(xiàn)，當子級為空時，后臺應(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實現(xiàn)用戶動態(tài)權(quán)限登錄的代碼示例
這篇文章主要介紹了vue如何實現(xiàn)用戶動態(tài)權(quán)限登錄，文中的代碼示例介紹的非常詳細，對大家學(xué)習vue有一定的幫助，需要的朋友可以參考閱讀2023-05-05
這篇文章主要介紹了提高vue.js中大型數(shù)據(jù)的性能,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue彈窗里面使用echarts不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3 的響應(yīng)式和以前有什么區(qū)別，Proxy 無敵？
這篇文章主要介紹了Vue3 的響應(yīng)式和以前有什么區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-05-05
vue項目如何監(jiān)聽localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項目如何監(jiān)聽localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下2023-09-09
Vue.js如何優(yōu)雅的進行form validation
Vue.js如何優(yōu)雅的進行form validation，針對此問題，給出了多個網(wǎng)友的回答，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
在?Vue?開發(fā)中,父子組件間的通信是高頻場景,當需要在父組件中直接調(diào)用子組件的方法時,模板引用（Template?Refs）是最直接的解決方案,本文將通過一段?Vue?3?代碼片段,深入剖析如何通過?TypeScript?實現(xiàn)類型安全的子組件實例訪問,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue3中的響應(yīng)式原理-effect，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08