詳解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ù)。
默認子節(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]
當然有時候，獲取子節(jié)點數(shù)據(jù)時是一個異步請求，那么可以把resolve當參數(shù)進行傳遞，獲取到玩這個數(shù)據(jù)后再進行調(diào)用。

以上就是詳解el Cascader懶加載數(shù)據(jù)回顯示例的詳細內(nèi)容，更多關(guān)于el Cascader懶加載數(shù)據(jù)回顯的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

淺談vue項目優(yōu)化之頁面的按需加載(vue+webpack)
本篇文章主要介紹了vue項目優(yōu)化之頁面的按需加載(vue+webpack)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
Vue圖片懶加載之Vue-Lazyload的使用
懶加載就是延時加載,即當需要用到的時候再去加載,本文主要介紹了Vue圖片懶加載之Vue-Lazyload的使用,具有一定的參考價值,感興趣的可以了解一下
2024-05-05
詳解vue中router-link標簽所必備了解的屬性
這篇文章主要介紹了vue中router-link標簽所必備了解的屬性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例
這篇文章主要介紹了vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
Vue中的混入的使用(vue mixins)
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
詳解Vue 開發(fā)模式下跨域問題
本篇文章主要介紹了Vue 開發(fā)模式下跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
buildAdmin開源項目引入四種圖標方式詳解
這篇文章主要為大家介紹了buildAdmin開源項目引入四種圖標方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
Vue中導入excel文件的兩種方式及使用步驟
這篇文章主要介紹了Vue中導入excel文件的兩種方式,大概有兩種導入文件的方法：form表單和el-upload，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
Vue3實現(xiàn)canvas畫布組件自定義畫板實例代碼
Vue?Canvas是一個基于Vue.js的輕量級畫板組件,旨在提供一個簡易的畫布功能,用戶可以在網(wǎng)頁上進行自由繪圖,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09