element-ui 动态级联选择器Cascader

code_std

已于 2022-07-26 16:02:00 修改

阅读量1.1k

点赞数 1

文章标签： javascript elementui

于 2022-07-26 16:00:14 首次发布

本文链接：https://blog.csdn.net/qq_26330543/article/details/125996063

版权

这篇博客讲述了在Vue项目中使用Element UI的级联组件时遇到的数据量过大问题。作者尝试将原本一次性加载所有数据的方式改为动态加载，但在实现过程中遇到了`this`指向错误，导致数据无法正确传递。通过调整函数的定义方式，解决了`this`指向问题，实现了动态加载。博客总结了在官方示例基础上进行修改时如何正确访问组件外部的数据成员。

摘要由CSDN通过智能技术生成

这两天工作需要做一个级联，原本想使用 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);
			})
		  }
       };
    }
  };