VUE实现地理位置三级联动 插件vue-area-linkage

VUE实现地理位置三级联动

效果图：

1.安装vue-area-linkage插件：

//注意，在安装了element ui之后才能使用

npm i  vue-area-linkage area-data 
yarn add vue-area-linkage area-data

2.在main.js上进行依赖注入，如下图所示：

import VueArealinkage from 'vue-area-linkage';
Vue.use(VueArealinkage);

3.vue文件，代码如下

<template>
  <div>
    <div class="test">
      <div class="area">
        <area-select
          type="all"
          :placeholders="placeholders"
          :level="2"
          @change="gg"
          v-model="selected"
          :data="pcaa"
        >
        </area-select>
      </div>
    </div>
  </div>
</template>
<script>
// 根据需要按需引入数据
import "vue-area-linkage/dist/index.css";
import { AreaSelect } from "vue-area-linkage";
import AreaData from "area-data";
import {pcaa} from "area-data";
export default {
  component: {
    AreaSelect,
  },
  data() {
    return {
      pcaa: pcaa,
      placeholders: [" ", " ", " "],
      selected: [],
    };
  },
  methods: {
    gg() {
      console.log(this.selected);
    },
  },
};
</script>