vue-area-linkage实现省市区三级联动效果

一：安装组件

npm i --save vue-area-linkage area-data

二：在main.js文件中导入注册使用

//main.js下
import VueAreaLinkage from 'vue-area-linkage'
import 'vue-area-linkage/dist/index.css'

Vue.use(VueAreaLinkage)

三：在我们实现此效果的组件或者页面内导入地区数据

（我是在vue的工程化开发环境下写的）

import { pca, pcaa } from 'area-data'

四：在template内使用

//v-model双向绑定，在script中address1定义的是一个数组，例如address1:['610000','610100','610113']
//data=“是指应用的数据是我们上面导入的pcaa”

五：记得在script的return下定义好这些内容：

return {
    address1: [], // 接收数据的对象
    pca: pca,
    pcaa: pcaa
}

这样选择好的地区数据就会保存在address1中了，不过里面都是地区的编号 ，如果你需要向后端发送的地址是一个xx省xx市xx县的字符串数据，就下面这样做。

六：根据地区编号找到对应的地区并拼接成字符串

// 根据地址数组中的数字找到对应的地区并拼成汉字的字符串
          const province = pcaa[86][this.address1[0]]
          const city = pcaa[this.address1[0]][this.address1[1]]
          const district = pcaa[this.address1[1]][this.address1[2]]

          const address = [province, city, district].join('')

其中this.address1[ ]指的就是我们在return定义的接收地址数组的东西，这样下来我们就会找到对应的地址字符串并存在address中了

七：效果图：

八：补充

小编在实现此效果时并没有具体设置这个选择的具体样式，但查找各位大神的博客发现有写怎么改样式，自己没有亲自尝试，以后有机会再具体操作，现在先记录下来防止找不到