el-cascader级联下拉框，懒加载

喜欢ヅ旅行 2022-11-15 12:53 542阅读 0赞

### 效果如下： ###

![在这里插入图片描述][20210401163135386.gif_pic_center]

### 实现方式： ###

<el-cascader ref="cascader" v-model="form.province" :options="options" 第一层数据 :placeholder="form.province2" 默认值回显，因为lazy懒加载，v-model回显不了 :props="props" 用于后几层数据的懒加载 />

data(){ 
    	return{ 
    			const self = this
    			props: { 
    		        value: 'code',
    		        label: 'name',
    		        lazy: true,
    		        lazyLoad(node, resolve) { 
    		          if (node.data) self.getChildArea(node, resolve)//懒加载后几层数据
    		        }
    	      }
    	}
    }
    	
    methods:
    getChildArea(node, resolve) { 
          let childProjects = []
          getArea(接口参数).then(res => { 
            if (res.code == '200') { 
              childProjects = res.data 
              if (node.level > 1) {  // level从0开始，统一设置第3层为叶子节点，再没有下一层了
                for (const item of childProjects) { 
                  item.leaf = true
                }
              }
              resolve(childProjects)// 获取数据后调用resolve将子项数据渲染至视图
            }
          })
    }

[20210401163135386.gif_pic_center]: /images/20221022/590817af882943d58f6bc8b9fb86d4c3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，542人围观）

还没有评论，来说两句吧...

相关阅读

相关 el-cascader级联下拉框，懒加载

效果如下： ![在这里插入图片描述][20210401163135386.gif_pic_center] 实现方式： <el-cascader ref="

喜欢ヅ旅行/ 2022年11月15日 12:53/ 0 赞/ 543 阅读

相关 Struts2 级联下拉框详解析

运行环境：myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构： ![Struts2 <s:doubleselect>级联下拉框详解析][Strut

淩亂°似流年/ 2022年09月25日 10:15/ 0 赞/ 263 阅读

相关 JQ动态加载下拉框数据

$.getJSON("${pageContext.request.contextPath}/shop/loadAjaxFloor.action",

痛定思痛。/ 2022年08月22日 12:23/ 0 赞/ 250 阅读

相关搜索下拉框级联

$('\cat\_type').change(function()\{ var id = $(this).children(

左手的ㄟ右手/ 2022年08月10日 16:32/ 0 赞/ 290 阅读

相关 ext_comboBox二级级联下拉框

代码示例： Ext.onReady(function()\{ var store = new Ext.data.Store(\{ proxy: new Ext.data.Ht

Bertha 。/ 2022年08月10日 11:47/ 0 赞/ 261 阅读

相关【JQuery】——级联下拉框效果

【html】 <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-

柔情只为你懂/ 2022年07月14日 01:37/ 0 赞/ 315 阅读

相关加载easyui下拉框

var coms=window.parent.dics.compType; coms.unshift({'value':'','key'

川长思鸟来/ 2022年06月07日 01:56/ 0 赞/ 255 阅读

相关 jsp——动态加载下拉框

<table> <tbody> <tr> <td><font>◆思路</font></td> </tr> </tbody> </table>

我会带着你远行/ 2022年05月17日 12:45/ 0 赞/ 271 阅读

相关 antd级联框Cascader动态加载的用法

一，官方文档：[https://ant.design/components/cascader-cn/\header][https_ant.design_components_c

朱雀/ 2022年04月15日 00:56/ 0 赞/ 1602 阅读

相关 [编]使用CascadingDropDown实现级联式下拉框

使用CascadingDropDown实现级联式下拉框引言级联式下拉框，有时也叫联动下拉框，也是Web页面中一个很常见的功能。就是假设有若干个下拉框，比如说有3

今天药忘吃喽~/ 2022年01月05日 17:47/ 0 赞/ 356 阅读