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