詳解el Cascader懶加載數(shù)據(jù)回顯示例
更新時(shí)間：2022年11月07日 10:35:10 作者：唐詩
這篇文章主要為大家介紹了詳解el Cascader懶加載數(shù)據(jù)回顯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
- 數(shù)據(jù)回顯時(shí)保證
v-model props options綁定的數(shù)據(jù)是正確的。 - 調(diào)用
props.lazyLoad方法中的resolve回掉函數(shù)設(shè)置數(shù)據(jù)，示例來自el官網(wǎng)。 - 好多例子中說需要設(shè)置
options， 但是異步獲取子節(jié)點(diǎn)，設(shè)置它是沒有用的。
<el-cascader :props="props"></el-cascader>
<script>
let id = 0
export default {
data() {
return {
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node
setTimeout(() => {
const nodes = Array.from({ length: level + 1 }).map((item) => ({
value: ++id,
label: `選項(xiàng)${id}`,
leaf: level >= 2
}))
// 通過調(diào)用resolve將子節(jié)點(diǎn)數(shù)據(jù)返回，通知組件數(shù)據(jù)加載完成
resolve(nodes)
}, 1000)
}
}
}
}
}
</script>
- el-Cascader 數(shù)據(jù)回顯時(shí)需要一份可以完整顯示的數(shù)據(jù)，比如選擇的是a節(jié)點(diǎn)下的b那就有如下數(shù)據(jù)格式。
v-model的值為[a, b] lazyLoad方法初始化會(huì)加載一次，可以在此判斷v-model綁定的值是否為空來確定是否需要回顯數(shù)據(jù)。- 默認(rèn)子節(jié)點(diǎn)是 children 可以通過
props進(jìn)行更改。
// 假設(shè)是異步獲取 處理好的數(shù)據(jù)
let data = [
{
value: 'a',
label: 'a節(jié)點(diǎn)',
leaf: false,
children: [
{
value: 'b',
label: 'a的子節(jié)點(diǎn)b',
leaf: true,
children: []
}
]
}
];
- 只要通過
props.lazyLoad方法中的resolve回掉函數(shù)設(shè)置完整可展示的數(shù)據(jù),那么就可以實(shí)現(xiàn)回顯。如上邊例子 通過resolve(data)后即可回顯[a, b] - 當(dāng)然有時(shí)候，獲取子節(jié)點(diǎn)數(shù)據(jù)時(shí)是一個(gè)異步請求，那么可以把
resolve當(dāng)參數(shù)進(jìn)行傳遞，獲取到玩這個(gè)數(shù)據(jù)后再進(jìn)行調(diào)用。
以上就是詳解el Cascader懶加載數(shù)據(jù)回顯示例的詳細(xì)內(nèi)容，更多關(guān)于el Cascader懶加載數(shù)據(jù)回顯的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
淺談vue項(xiàng)目優(yōu)化之頁面的按需加載(vue+webpack)
本篇文章主要介紹了vue項(xiàng)目優(yōu)化之頁面的按需加載(vue+webpack)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
懶加載就是延時(shí)加載,即當(dāng)需要用到的時(shí)候再去加載,本文主要介紹了Vue圖片懶加載之Vue-Lazyload的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
詳解vue中router-link標(biāo)簽所必備了解的屬性
這篇文章主要介紹了vue中router-link標(biāo)簽所必備了解的屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue + elementUI實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法示例
這篇文章主要介紹了vue + elementUI實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了Vue 開發(fā)模式下跨域問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解
這篇文章主要為大家介紹了buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue中導(dǎo)入excel文件的兩種方式,大概有兩種導(dǎo)入文件的方法：form表單和el-upload，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3實(shí)現(xiàn)canvas畫布組件自定義畫板實(shí)例代碼
Vue?Canvas是一個(gè)基于Vue.js的輕量級(jí)畫板組件,旨在提供一個(gè)簡易的畫布功能,用戶可以在網(wǎng)頁上進(jìn)行自由繪圖,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09