vue+elementUi 中国省市区/省市，三级/两级联动选择

• 安装城市数据：
• • 省市不带‘全部’的二级联动：
  • 省市带‘全部’的二级联动：
  • 省市区不带‘全部’三级联动选择：
  • 省市区带‘全部’三级联动选择：

安装城市数据：

终端输入：

npm install element-china-area-data -S

省市不带‘全部’的二级联动：

1. 导入二级数据：

//二选一
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
import { provinceAndCityData } from 'element-china-area-data'

2. HTMl:

<template><div id="app"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange">el-cascader>div>
template>

3. js：

export default {data () {return {options: provinceAndCityData,selectedOptions: []}},methods: {handleChange () {var loc = "";for (let i = 0; i < this.selectedOptions.length; i++) {loc += CodeToText[this.selectedOptions[i]];}console.log(loc)//打印区域码所对应的属性值即中文地址}}//也可以这样写handleChange (value) {console.log(value)}}

4. 效果预览：
   

省市带‘全部’的二级联动：

1. 导入二级数据：

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

2. HTMl:

<template><div id="app"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange">el-cascader>div>
template>

3. js：

export default {data () {return {options: provinceAndCityDataPlus ,selectedOptions: []}},methods: {handleChange () {var location = "";for (let i = 0; i < this.selectedOptions.length; i++) {location+= CodeToText[this.selectedOptions[i]];}console.log(location)//打印区域码所对应的属性值即中文地址}}//也可以这样写handleChange (value) {console.log(value)}}

4. 效果预览:
   

省市区不带‘全部’三级联动选择：

1. 导入三级数据：

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

2. HTMl:

<template><div id="app"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange">el-cascader>div>
template>

3. js：

export default {data () {return {options: regionData ,selectedOptions: []}},methods: {handleChange () {var loc = "";for (let i = 0; i < this.selectedOptions.length; i++) {loc += CodeToText[this.selectedOptions[i]];}console.log(loc)//打印区域码所对应的属性值即中文地址}}//也可以这样写handleChange (value) {console.log(value)}}

4. 效果预览：
   

省市区带‘全部’三级联动选择：

1. 导入三级数据：

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

2. HTMl:

<template><div id="app"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange">el-cascader>div>
template>

3. js：

export default {data () {return {options: regionDataPlus ,selectedOptions: []}},methods: {handleChange () {var loc = "";for (let i = 0; i < this.selectedOptions.length; i++) {loc += CodeToText[this.selectedOptions[i]];}console.log(loc)//打印区域码所对应的属性值即中文地址}}//也可以这样写handleChange (value) {console.log(value)}}

4. 效果预览：
   

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！