element的級聯動態加載允許選任意一級

el-cascader級聯組件動態加載數據

 

 

<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
                }));
              // 通過調用resolve將子節點數據返回，通知組件數據加載完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

可是如果加入允許選擇任意一項的屬性，就會出現如下問題：

葉子節點會一直出現加載圖標

 

 最簡便的解決辦法：

直接在葉子節點的對象中將load屬性改為已加載，如圖所示：

props: {
          checkStrictly:true,
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            if(level==0){
              ....
              resolve(nodes);
            }else if(level==1){
                  ....
                  resolve(nodes);
                }.bind(this)
              );
            }else{
              node.loading=false;
              node.loaded=true;
            }
          }
        },

效果圖：