詳解el Cascader懶加載數(shù)據(jù)回顯示例
更新時(shí)間：2022年11月07日 10:35:10 作者：唐詩(shī)
這篇文章主要為大家介紹了詳解el Cascader懶加載數(shù)據(jù)回顯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
- 數(shù)據(jù)回顯時(shí)保證
v-model props options綁定的數(shù)據(jù)是正確的。 - 調(diào)用
props.lazyLoad方法中的resolve回掉函數(shù)設(shè)置數(shù)據(jù)，示例來(lái)自el官網(wǎng)。 - 好多例子中說(shuō)需要設(shè)置
options， 但是異步獲取子節(jié)點(diǎn)，設(shè)置它是沒(méi)有用的。
<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
}))
// 通過(guò)調(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綁定的值是否為空來(lái)確定是否需要回顯數(shù)據(jù)。- 默認(rèn)子節(jié)點(diǎn)是 children 可以通過(guò)
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: []
}
]
}
];
- 只要通過(guò)
props.lazyLoad方法中的resolve回掉函數(shù)設(shè)置完整可展示的數(shù)據(jù),那么就可以實(shí)現(xiàn)回顯。如上邊例子 通過(guò)resolve(data)后即可回顯[a, b] - 當(dāng)然有時(shí)候，獲取子節(jié)點(diǎn)數(shù)據(jù)時(shí)是一個(gè)異步請(qǐng)求，那么可以把
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ù)回顯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
VSCode Vue開(kāi)發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開(kāi)發(fā)推薦插件和VSCode快捷鍵(小結(jié))，文中通過(guò)圖文表格介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
微信小程序Echarts動(dòng)態(tài)使用及圖表層級(jí)踩坑解決方案
這篇文章主要為大家介紹了微信小程序Echarts動(dòng)態(tài)使用及圖表層級(jí)踩坑解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue總線機(jī)制(bus)知識(shí)點(diǎn)詳解
在本篇文章中小編給大家整理的是關(guān)于vue總線機(jī)制(bus)知識(shí)點(diǎn)總結(jié)，有興趣的朋友們可以跟著學(xué)習(xí)下。2020-05-05
Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程
這篇文章主要介紹了vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于vue-cli3創(chuàng)建libs庫(kù)的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫(kù)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Element-ui tree組件自定義節(jié)點(diǎn)使用方法代碼詳解
本文通過(guò)實(shí)例代碼給大家介紹了Element-ui tree組件自定義節(jié)點(diǎn)使用方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue簡(jiǎn)易版無(wú)限加載組件實(shí)現(xiàn)原理與示例代碼
這篇文章主要給大家介紹了關(guān)于Vue簡(jiǎn)易版無(wú)限加載組件實(shí)現(xiàn)原理與示例代碼的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-07-07
裝飾器是一種與類(lèi)相關(guān)的語(yǔ)法糖,用來(lái)包裝或者修改類(lèi)或者類(lèi)的方法的行為,其實(shí)裝飾器就是設(shè)計(jì)模式中裝飾者模式的一種實(shí)現(xiàn)方式,下面這篇文章主要給大家介紹了關(guān)于Vue中使用裝飾器的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue編寫(xiě)簡(jiǎn)單的購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vue編寫(xiě)簡(jiǎn)單的購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01