ElementUI省市区三级联动

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])
    }


}