elementUI Cascader 级联选择器之动态加载

定义

文档解释：当选中某一级时，动态加载该级下的选项。也就是说，当我们选中了某一级的某选项后，才会发出网络请求，获取下一级的选项数据，从而避免一开始加载所有的选项数据。

文档例子解析

<el-cascader :props="props"></el-cascader> //

<script>
  let id = 0;

  export default {
    data() {
      return {
        props: {
          lazy: true,   // 开启动态加载
          lazyLoad (node, resolve) {	// 设置加载数据源方法 默认执行一次
          	// node 为当前点击的节点
          	// resolve 为数据加载完成的回调(必须调用)
          	/* node此时属性为:
          		当前叶子  level：0
          		loaded：true
          		loading：false
          		是否是根  root：ture
          	*/
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })  //from此时形成一个长度为1的[ ]
                .map(item => ({  // 遍历，形成选项数据
                  value: ++id,	// 选项值
                  label: `选项${id}`,	// 选项名
                  leaf: level >= 2	// 是否为末尾
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

举例

      props: {
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.proprs_lazyLoad(),
      },
          proprs_lazyLoad() {
     	 	let that = this;
      		return function lazyLoad(node, resolve) {
       		 	const { level } = node;
      			 if (level !== 0) {
         		 that.pid = node.value;
        	}
        	getAreasInfoByPid({ pid: that.pid }).then((res) => {
          		if (res.code === 20000) {
        	    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
           		 // resolve(nodes);
         	  		 resolve(
          		    res.data.map((item) => {
             		   return {
            		      value: item.aid,
          		       	 label: item.atitle,
     		             leaf: level >= 2,
        	        };
      	        })
      	      );
     	     }
  	      });
 	     };
    },