最近项目中需要编辑“收货地址”，上网搜索发现了Vue的一款地区联动插件：vue-area-linkage，结合项目记录插件使用过程：

该插件基于Element UI，所以必须安装Element UI。

1、安装：npm i element-ui vue-area-linkage area-data

2、使用：

main.js中依赖注入：

import ElementUI from 'element-ui';//饿了么UI
import 'element-ui/lib/theme-chalk/index.css';//可以不引入，自己写样式
import VueAreaLinkage from 'vue-area-linkage';//省市区三级联动选择器

Vue.use(ElementUI);
Vue.use(VueAreaLinkage)

在使用插件的vue组件template标签中使用area-select标签

<div class="area">
  <area-select type="text" :placeholders=['选择省','选择市','选择区'] :level="2" v-model="selected" ></area-select>
</div>

<script>
  // 根据需要按需引入数据
  import { pca, pcaa } from "area-data";
  export default {
    data() {
      return {
        pcaa: pcaa,//最多省市区三级，结合:level='2'选择，0省、1省市、2省市区
     placeholders: ['选择省','选择市','选择区'],
        selected: [],
      }
    }
  }
</script>

2）当不引入index.css，完全自定义样式时，可以根据组件需要写到对应组件私有的style标签中，必须加scoped。

建议：引入index.css，只需覆盖部分样式即可。

1、https://www.npmjs.com/package/vue-area-linkage

2、https://dwqs.github.io/vue-area-linkage/