element级联选择器懒加载同时实现动态添加节点数据

4,299 阅读4分钟

入职不久的萌新第一次写文章好紧张....(没有经验,文章写得着实是很粗糙了)

在做项目的时候遇到了难点就想着随便记录一下吧。

需求是:element-ui级联选择器实现懒加载效果,点击添加按钮成功添加数据后更新级联选择器数据。element-ui级联选择器懒加载中,当点击了某一节点才会触发lazyLoad中的函数获取级联选择器的数据。那实现添加后刷新的思路就是触发props中的lazyLoad函数。

  1. 实现懒加载

    <el-cascader 

       :show-all-levels="false" 

       size="mini"

       :value="value"

      @change="change"

      :options="projectOptions"

      placeholder="请选择分组"

      :props="projectProps">

   

     

    绑定props值,设置props中的lazy为true,才能实现动态加载,每次点击节点时,会触发props中的lazyLoad中的函数。

2. 添加数据后更新级联选择器数据

解决方法:在级联选择器中绑定options属性,添加后把options绑定的属性值设置为空数组会触发lazyLoad函数

重新把options选项赋值为空数组会触发lazyLoad,对数据进行刷新