前端使用vue做多级地区联动（三级地区联动、四级地区联动）demo

方案一

使用方案一最简洁，只需要引入一个js即可，可操作性强，能够根据自己的需求来进行设置
使用步骤
第一步：引入地区联动js
百度云资源链接 密码：6666
第二步：
在vue中使用

<template>
    <div>
        <!-- {{s}} -->
        <div>
            <select v-model="s">
                <option v-for="item in Object.keys(data)" :key="item">
                    {{item}}
                </option>
            </select>
            <select v-model="c">
                <option v-for="item in Object.keys(data[s])" :key="item">
                    {{item}}
                </option>
            </select>
            <select v-model="q">
                <option v-for="item in Object.keys(data[s][c])" :key="item">
                    {{item}}
                </option>
            </select>
            <select v-model="j">
                <option v-for="item in data[s][c][q]" :key="item"> 
                    {{item}}
                </option>
            </select>
        </div>
    {{s}}
    {{c}}
    {{q}}
    {{j}}
    </div>
</template>

<script>
这里的路径根据自己实际路径引入
import data from '../../../pca'
    export default {
        data(){
            return{
                data,
                s:'北京市',
                c:'市辖区',
                q:'朝阳区',
                j:'建外街道'
            }
        },
        watch:{
            s (){
                this.c = Object.keys(data[this.s])[0]
                this.q = Object.keys(data[this.s][this.c])[0]
                this.j = data[this.s][this.c][this.q][0]
            },
            c(){
                this.q = Object.keys(data[this.s][this.c])[0]
                this.j = data[this.s][this.c][this.q][0]
            },
            q(){
                this.j = data[this.s][this.c][this.q][0]
            },
          
        }
    }
</script>

<style  scoped>

</style>

方案二

使用vue组件
步骤
第一步：

npm install --save vue-area-linkage

npm install --save area-data-vue  

在main.js中引用

import {pcaa} from 'area-data-vue';
import 'area-linkage-vue/dist/index.css';
import AreaLinkageVue from 'area-linkage-vue';
Vue.prototype.$pcaa = pcaa;
Vue.use(AreaLinkageVue)

在vue中使用

<div>
<area-select v-model="selected" :data="$pcaa" :level="3" style="display: flex; line-height: 18px"></area-select>
</div>

在return中定义数据
selected: [],

如果需要设置默认值可以搞个测试按钮，打印一下响应设置的默认地区编码是多少，然后在selected中设置默认值即可
例如：
我需要设置湖北省武汉市东西湖区金银湖

selected: ["420000", "420100", "420112", "420112015"],