vue 省市县三级联动

1、

<template><div>所在省<el-select popper-class="eloption" :popper-append-to-body="true"@change="getShiList(obj.province)" v-model="obj.province" placeholder="请选择所在省" clearable@clear="removeSheng()"><el-option v-for="(item, index) in shengList" :key="item.code" :value="item.name" :label="item.name" /></el-select>所在市<el-select popper-class="eloption" :popper-append-to-body="true"@change="getAreaList(obj.city)" v-model="obj.city" placeholder="请选择所在市" clearable @clear="removeShi()"><el-option v-for="(item, index) in shiList" :key="item.code" :value="item.name" :label="item.name" /></el-select>所在区<el-select popper-class="eloption" :popper-append-to-body="true" @change="$forceUpdate()"v-model="obj.area" placeholder="请选择所在区" clearable><el-option v-for="(item, index) in areaList" :key="item.code" :value="item.name" :label="item.name" /></el-select></div>
</template><script>
const arr = require('@/assets/city.js');
export default {data() {return {shengList: arr.default,shiList: [],  //arr.default[0].code  北京市一个对象，其他省可有多个市areaList: [],obj: {// province:'',// city: '',// area: '',},}},methods:{// 获得市getShiList(shengName) {this.$forceUpdate()this.obj.city = ''this.obj.area = ''this.shengList.forEach(v => {if (v.name == shengName) {this.shiList = v.children}})},// 获得区getAreaList(shiName) {this.$forceUpdate()this.obj.area = ''this.shiList.forEach(v => {if (v.name == shiName) {this.areaList = v.children}})},removeSheng(e){console.log("删除省")this.$forceUpdate()// this.obj.sheng = ''// this.obj.city = ''// this.obj.area = ''this.shiList = []this.areaList = []},removeShi(e){console.log("删除shi")this.$forceUpdate()// this.obj.city = ''// this.obj.area = ''this.areaList = []},}
}
</script><style></style>

2、city.js
文件太大了
https://download.csdn.net/download/Ann_52547/87755408
格式是这样的:

const arr = [
{"code": "11","name": "北京市","children": [{"code": "1101","name": "北京市","children": [{"code": "110101","name": "东城区"},{"code": "110102","name": "西城区"}]}]}

参考：
1、这个文件可以下载
省市区三级联动城市数据js文件。（复制后放入citys.js文件中，可自定义文件名）
2、distpicker插件编写
vue实现省市县三级联动，超简单
3、vue中实现省市区三级联动(V-Distpicker插件)