elementUI官方文檔對級聯(lián)選擇器的動態(tài)加載數(shù)據(jù)介紹的比較簡單，我在使用的時候遇到了點坑。

官方文檔

從文檔中可以看出，動態(tà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: `選項${id}`,
                  leaf: level >= 2
                }));
              // 通過調(diào)用resolve將子節(jié)點數(shù)據(jù)返回，通知組件數(shù)據(jù)加載完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

我們可以看到，只要給el-cascader組件傳入props屬性，并在props屬性中設置lazy:true，lazyLoad函數(shù)即可以開啟動態(tài)加載，需要注意的是，lazyLoad是一個函數(shù)。

遇到的問題

但是在實際的使用中，在data里面定義一個函數(shù)顯得太過臃腫，我更喜歡在methods里面去定義動態(tài)加載數(shù)據(jù)的方法。但是當將lazyLoad的值設置為一個函數(shù)的時候，會提示函數(shù)不存在，我們來分析下這個問題的原因及解決方案。

image.png

el-cascader組件中的this

我們可以在lozyLoad函數(shù)中輸出this，來查看為什么加載數(shù)據(jù)的方法initData不存在。

      props:{
        checkStrictly : true,
        lazy:true,
        lazyLoad(node,resolve){
          console.log(this,'lazyLoad')
         // this.initData(node,resolve)
        }
      }

el-cascader組件中的this

由此引發(fā)的問題：由于this指向的不是調(diào)用組件時的vue實例，所以我們無法取到當前項目的Vue實例，故所有的全局數(shù)據(jù)，方法，VUEX里面的數(shù)據(jù)等等，均無法在動態(tài)加載數(shù)據(jù)時候使用。從這一點出發(fā)，這個問題必須要解決。

解決方案

由于vue在實例初始化的時候，data和methods等作為選項對象傳入，而data是一個函數(shù)，所以我們可以在函數(shù)return之前將當前vue實例this保存到that中，然后在lazyLoad函數(shù)中，通過that調(diào)用initData方法。

  data() {
    let that=this;
    return {
      props:{
        checkStrictly : true,
        lazy:true,
        lazyLoad(node,resolve){
          console.log(this,'lazyLoad')
          console.log(that,'that')
          that.initData(node,resolve)
        }
      }
    }
  },

通過這種方式，我們可以在lazyLoad中使用我們自定義的函數(shù)了。