轉載地址： https://blog.csdn.net/izengjing/article/details/81354908#commentBox
Element UI 中國省市區級聯數據
頁面樣式：
安裝
npm install element-china-area-data -S
在線示例
使用
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
provinceAndCityData是省市二級聯動數據（不帶“全部”選項）regionData是省市區三級聯動數據（不帶“全部”選項）provinceAndCityDataPlus是省市區三級聯動數據（帶“全部”選項）regionDataPlus是省市區三級聯動數據（帶“全部”選項）- "全部"選項綁定的value是空字符串
"" CodeToText是個大對象，屬性是區域碼，屬性值是漢字 用法例如：CodeToText['110000']輸出北京市TextToCode是個大對象，屬性是漢字，屬性值是區域碼 用法例如：TextToCode['北京市'].code輸出110000,TextToCode['北京市']['市轄區'].code輸出110100,TextToCode['北京市']['市轄區']['朝陽區'].code輸出110105
-
省市二級聯動（不帶“全部”選項）:
-
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { provinceAndCityData } from 'element-china-area-data' export default { data () { return { options: provinceAndCityData, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
-
省市二級聯動（帶“全部”選項）:
-
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { provinceAndCityDataPlus } from 'element-china-area-data' export default { data () { return { options: provinceAndCityDataPlus, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
-
-
省市區三級聯動（不帶“全部”選項）
-
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { regionData } from 'element-china-area-data' export default { data () { return { options: regionData, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
- 省市區三級聯動（帶“全部”選項）
-
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { regionDataPlus } from 'element-china-area-data' export default { data () { return { options: regionDataPlus, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
-
綁定value格式
value是區域碼"110000"