这两天工作需要做一个级联，原本想使用 element-ui 普通级联，后端直接把数据封装好返回就行了，可是发现数据量太大了就想改成动态加载的。然后问题出现了。

依官方例子修改（错误示例）

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

<script>
import HttpJson from "../../../utils/requestJson.js"

  export default {
    data() {
      unit:"",
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            let data;
			if(node.level == 0){
			  data = {
			    deptno:node.value,
			  };
			}else{
			  data = {
			    deptno:this.unit,//此处报错（原因this指向的是 props 这个对象）
			  };
			}
			HttpJson.post("/userDept/listDept",data).then(res=>{
				  resolve(res.data.result);
			})
        }
      };
    }
  };
</script>

依官方例子修改（正确写法）

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

<script>
import HttpJson from "../../../utils/requestJson.js"

  export default {
    data() {
      unit:"",
      return {
        props:{
		  label: "orgName",
	      value: "orgCode",
		  lazy: true,
		  lazyLoad:((node,resolve)=>{
			let data;
			if(node.level == 0){
			  data = {
			    deptno:node.value,
			  };
			}else{
			  data = {
			    deptno:this.unit,//此处this指向是VUE这个实例）
			  };
			}
			
			HttpJson.post("/userDept/listDept",data).then(res=>{
			  resolve(res.data.result);
			})
		  }
       };
    }
  };

总结

官方给的例子也没有问题，问题在于如果想依照官方文档上的写法获取data中声明的参数就较为困难，所以需要使用第二种方式改变this指向即可