這兩天工作需要做一個級聯，原本想使用 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指向即可