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

Posted 2023-04-02

参考技术A 业务场景一：选择框，类似于选择目的地，出发地这种，，可以设置省，或者省市，以及省市区

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

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

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

第一步处理转化成字符串

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

使用vue+element ui 实现省市区三级联动

使用vue+element ui 实现省市区三级联动

开发工具 Hbuilder x
使用技术vue2+Element ui

效果图如下👇👇👇

话不多说 上代码👀

一，页面部分

<template>
	<div>
	    <el-cascader
	      size="large"
	      :options="city"
	      v-model="selectedOptions"
	      @change="handleChange">
	    </el-cascader>
	  </div>
</template>

二，script部分

首先引入以下代码

import { regionData } from 'element-china-area-data'

注意！！！ 引入上方代码之前 需先运行下方代码进行安装

npm install element-china-area-data -S

然后再写入以下代码

export default {
	    data () {
	      return {
	        city: regionData,
	        selectedOptions: []
	      }
	    },
	
	    methods: {
	      handleChange (value) {
	        console.log(value)
	      }
	    }
	  }
	  

这样一个省市区三级联动的下拉列表就完成了