使用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)
}
}
}
这样一个省市区三级联动的下拉列表就完成了