el-cascader 级联选择器动态加载数据及回显数据方法（最全概括）＜grootbaby＞

_格鲁特宝宝

已于 2022-12-07 09:00:56 修改

阅读量1.7w

点赞数 11

分类专栏： Vue Element UI Web FrontEnd 文章标签： vue.js elementui javascript el-cascader el-cascader动态加载

于 2022-07-16 13:12:11 首次发布

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/grootbaby/article/details/125818582

版权

本文详细介绍了如何在 Vue.js 中使用 ElementUI 的 el-cascader 组件实现级联选择器的动态加载数据，解决数据量大导致的加载慢问题。同时，针对编辑回显时可能出现的问题，提供了解决方案，包括利用 showCascader 和 resetCascader 方法确保正确显示已选值。文章还强调了 lazy 和 lazyLoad 属性在实现懒加载中的作用，以及通过节点的 level 属性判断并处理最后一级的选择状态，以获取完整选中路径的 code 和 name。

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

当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值。依次类推，拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。

上代码

<el-cascader
  v-if="showCascader"
  class="form-item-cascader"
  :key="resetCascader"
  ref="myCascader"
  v-model="ruleForm.area"
  placeholder="请选择地区"
  :props="optionProps"
  clearable
  @change="handleChange"
></el-cascader>

optionProps: {
  value: 'code',
  label: 'name',
  children: 'areaList',
  emitPath: true,
  lazy: true,
  lazyLoad: (node, resolve)=> {
      const { level, value } = node; // 获取当前node对象