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

Posted 2021-12-10 码农陈冠希

使用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)
	      }
	    }
	  }
	  

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