element，el-cascader省市区级联动态加载数据

最新推荐文章于 2023-03-24 16:42:31 发布
最新推荐文章于 2023-03-24 16:42:31 发布
阅读量3k 收藏 6
点赞数 3
分类专栏： element-ui 省市区级联
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42312077/article/details/107106246
版权

效果图（可选择某个省份下的全部市，或某个市下面的全部区/县）
在这里插入图片描述
代码

<el-cascader
	:props="props"
	 @change="locationsChange"
	 placeholder="省/市/区"
	 size="small"
	 v-model="locationsData"
	 clearable
></el-cascader>

<script>
  // import { getComProvince, getComCity, getComDistrict } from "@/service/common";
  export default {
   
    data() {
   
      return {
   
      	locationsData: [],
        props: {
   
	        lazy: true,
	        async lazyLoad(node,
最低0.47元/天 解锁文章
小李吖
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element el-cascader动态加载数据 （多级联动，落地方案）
imtokenmax众筹
04-17 1136
如果是三级，那么leaf值是=> 0, 1, 2，以此类推。我的是四级，所以是 => node.level >= 3。获取到数据后，需要按照它的规范赋值 => value：值，label：文字，leaf：层级。value: [], // 多级联动的值 => 会是一个数组。// node 节点数据 node.value => 当前节点的值。配置自己的接口请求，我的是地区数据（省市区四级联动）// level: 层级 => 1,2,3,4。// obj里的键值是官方要求的。// 为1代表第一次请求。
el-cascader实现省市区县地区数据的动态加载和回显
jiaqi099的博客
02-23 4406
elementui的级联控件实现地区的异步动态加载和保存回显 el-cascader组件实现地区的动态加载和选择，关于地区的基础数据可以参考其他系列文章。 文章目录elementui的级联控件实现地区的异步动态加载和保存回显前言一、el-cascader动态加载二、数据提交和回显1.提交2.回显三、页面效果图总结 前言 项目中用到发货地，支持省市区县的动态加载和选择，使用elementui中el-cascader组件，完美应用到项目中。供大家参考。 一、el-cascader动态加载 完整的地区数量
级联选择器（el-cascader）动态加载（lazyLoad）实现省市区三级选择、回显及参数整合
爱蹦哒的咸鱼的博客
03-24 1493
级联选择器（el-cascader）动态加载（lazyLoad）实现省市区三级选择、回显及参数整合
其实巨简单 el-cascader动态加载回显的解决办法 省市区三级联动回显 el-cascader实现省市区县地区数据的动态加载和回显
暂时还没想好博客简介
11-14 1824
el-cascader动态加载回显的解决办法 省市区三级联动回显 el-cascader实现省市区县地区数据的回显
element Cascader 级联选择器 动态加载 省市县 三级数据
逆风优雅的博客
05-13 1434
需求：使用联级选择器展示省市县三级 如下图： 方法如下：请仔细阅读图片 通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。 联级选择器第一层数据，要么写死，要么通过数据获取，次处
使用elementui级联选择器Cascader的动态加载获取省市区
JJ_Smilewang的博客
02-23 1536
后端给了我一个区域联动的接口，是需要在获取省的基础上，再根据省的编码再次发送请求获取下一层的市，以此类推获取对应的区。开始我就按照传统的获取数据的方法获取，也确实将对应的省市区数据成功的获取到并打印出来了，但是有个问题：页面展示时有的省只能出现二级，无法出现第三级区内容，但是打印出来的数据明明有区内容，使用了很多方法，都未解决这个问题，而且由于嵌套发请求，也确实很费时，故决定使用Cascader的动态加载来获取数据。
element-plus---Cascader三级联动地区选择---json数据
08-19
适用于element-plus 的 Cascader三级联动地区选择---json数据，
Element中的Cascader（级联列表）动态加载省\市\区数据的方法
01-21
element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址（引用）传递，动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @expand-change=censusLandChange :props={ va
实现el-cascader组件点击文字即选中效果
最新发布
05-30
实现el-cascader组件点击文字即选中效果
el-cascader得到数据和数据回显——基于中国省市区地址三级联动
L_s_h_123456的博客
10-07 2198
1.得到数据（从el-cascader选择，得到数据） <el-cascader size="medium" :options="options" v-model="selectOptions"(回显就是显示selectOption的值) @change="handleChange"></el-cascader> data() { return { selectOptions: [], editForm:{} } } //地址选择器 handleChange(v
基于el-cascader实现省市二级联动，全选和取消全选
grace姐姐的博客
02-04 2985
需求：需要在城市列表最上方，增加“全选”选项，点击全选，选中列表所有城市，再次点击取消全选1.html部分 <el-cascader ref='cascader' v-model="cityCode" :options="areaOptions" :props="props" clearable @change="changeProblemType"> </el-cascader> cityCode：双向绑定最后要传给接口的值 are
element-ui el-cascader 动态加载省市区 三级联动
z00001993的博客
06-04 3803
<template> <div id="zoning"> <el-cascader ref="cascader" :options="options" :clearable="true" placeholder="请选择省市区" :size="size" :props="props" @active-item-change="handleItemChange" @cha.
elementUI的el-cascader实现省市区搜索
楚楚梦厦的博客
07-21 3126
elementUI的el-cascader实现省市区搜索，全国省市区级联选择器增加搜索地级市和直辖市等城市city级别的需求。即能够一键全选整个city
vue+element级联选择el-cascader省市区
娄小研的博客
03-18 1516
html <el-cascader v-model="value" :options="locationsData" @change="handleChange" :props="props" placeholder="省/市/区" clearable ></el-cascader> locationsData: [.
关于el-cascader省市区动态加载的使用以及获取label值和编辑时的回显问题
qq_53755493的博客
11-15 1168
使用el-cascader级联选择器动态加载会踩很多坑，血的教训，给大家避避坑
el-cascader 多选 多级联动数据回显
11-30
el-cascader是一个基于Element UI的级联选择器组件，支持多选和多级联动。要实现多选和多级联动数据回显，可以按照以下步骤进行： 1.在模板中使用el-cascader组件，并设置v-model为一个数组，用于存储选中的值。 2.在组件中设置options属性为一个数组，用于存储级联选择器的选项数据。 3.在组件中设置props属性为一个对象，用于自定义选项的属性，例如value用于指定选项的值，label用于指定选项的显示文本。 4.在组件中设置@change事件，用于在选项发生变化时更新选中的值。 5.在组件中设置@expand-change事件，用于在级联选择器展开时动态加载选项数据。 6.在组件中设置cascaderData属性为一个数组，用于存储级联选择器的选项数据。 7.在组件中设置censusLandChange方法，用于在级联选择器展开时动态加载选项数据。 以下是一个el-cascader多选多级联动数据回显的示例代码： ```html <template> <el-cascader v-model="selectedOptions" :options="cascaderData" :props="{ value: 'id', label: 'name' }" @change="handleChange" @expand-change="censusLandChange" placeholder="请选择省市区" style="width: 270px; padding-left: 7px;" multiple ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], cascaderData: [] }; }, mounted() { // 初始化选项数据 this.cascaderData = [ { id: 1, name: "北京市", children: [ { id: 11, name: "东城区", children: [ { id: 111, name: "东华门街道" }, { id: 112, name: "景山街道" } ] }, { id: 12, name: "西城区", children: [ { id: 121, name: "新街口街道" }, { id: 122, name: "西长安街街道" } ] } ] }, { id: 2, name: "上海市", children: [ { id: 21, name: "黄浦区", children: [ { id: 211, name: "外滩街道" }, { id: 212, name: "南京东路街道" } ] }, { id: 22, name: "徐汇区", children: [ { id: 221, name: "徐家汇街道" }, { id: 222, name: "漕河泾街道" } ] } ] } ]; }, methods: { handleChange(value) { // 更新选中的值 this.selectedOptions = value; }, censusLandChange(value, selectedData) { // 动态加载选项数据 const targetOption = selectedData[selectedData.length - 1]; targetOption.loading = true; setTimeout(() => { targetOption.children = [ { id: `${targetOption.id}1`, name: `${targetOption.name}1` }, { id: `${targetOption.id}2`, name: `${targetOption.name}2` } ]; targetOption.loading = false; }, 1000); } } }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值