vue中搭配element ui实现省市区三级联动

业务场景一:选择框,类似于选择目的地,出发地这种,,可以设置省,或者省市,以及省市区

业务场景(一)



业务场景二:在编辑页或者添加页中会需要更加详情的,省市区以及后面另加一个框

业务场景(二)

首先,从后台拿回来的数据是这样子的

后台返回数据1
后台返回数据2

首先拿到数据输出到控制台上是这样的

控制台1

第一步处理转化成字符串

let cityData =JSON.stringify(data.data.data);

第二步用正则把这些相对应的关键字段转化成element ui  三级联动需要 的字段

options =JSON.parse(cityData.replace(/orgId/g,"value").replace(/orgName/g,"label"));

第三步进一步演变成符合框架使用的格式

options.map((item, index)=>{

item.children = item.childrenDataList;

this.options.push(item);

});

<el-cascader :options="options" clearable filterable v-model="optionsMessage"></el-cascader>

这个时候就可以实现选择省市区的功能了,其中v-model的绑定的值就是后台需要的orgId

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 13,140评论 0 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,306评论 19 139
  • 吹着那熟悉的口琴 弹唱出一首爱的旋律 激起细腻的情感 是温馨 像久别的恋人 扑面而来的热吻 是柔情 伴着和风滋...
    在水一方_3e51阅读 1,924评论 0 4
  • 人这一生当中,痛苦是不可避免的。不如意更是常态,正所谓“人生不如意十之八九”。曾经读书时听到这句话,总觉得是一些悲...
    陆小尧阅读 1,833评论 0 0
  • 1. models.py中 models.ImageField(upload_to='static/imag...
    草东街派对阅读 2,924评论 0 0