vue 引用省市区三级联动(element-ui Cascader)

npm 下载

npm install element-china-area-data -S

 

main.js

import {provinceAndCityData,regionData,provinceAndCityDataPlus,regionDataPlus,CodeToText,TextCode} from 'element-china-area-data'

 

vue 文件

template 部分

 

<div class="linkage">

     <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" placeholder="请选择省/市/区"></el-cascader>

 </div>

 

script 部分

 

import {regionData, CodeToText} from "element-china-area-data"

 

data 部分

//省市区三级联动

options : regionData,

selectedOptions : [],

 

methods 部分

handleChange(value){

            this.selectedOptions[0] = CodeToText[value[0]]

            this.selectedOptions[1] = CodeToText[value[1]]

            this.selectedOptions[2] = CodeToText[value[2]]

        },