1.npm安装插件(失败用cnpm)
npm install element-china-area-data -s
2.代码
import {regionData, CodeToText, TextToCode} from 'element-china-area-data'
说明:
regionData:省市区数据
CodeToText:省市区的code转文字(用户选择时用)
TextToCode:省市区的文字转code(数据回显用)
<el-cascader placeholder="可搜索" :options="citys" filterable clearable @change="handleChange"
v-model="showCity">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
data () {
return {
citys: regionData,
showCity: [],
}
})
methods: {
//获取省市区三级联动的结果
handleChange (value) {
let cityNames = []
value.forEach(e => {
cityNames.push(CodeToText[e])
})
console.log(cityNames.join('-'))
},
//编辑时数据回显用(value:'安徽省-合肥市-包河区')
handleChange02 (value) {
var cityArr = value.split('-')
var arg1 = TextToCode[cityArr[0]].code
var arg2 = TextToCode[cityArr[0]][cityArr[1]].code
var arg3 = TextToCode[cityArr[0]][cityArr[1]][cityArr[2]].code
this.showCity.push(arg1, arg2, arg3)
console.log(cityArr[0] + '-' + cityArr[1] + '-' + cityArr[2])
}
}