示例：选择省市区的三级联动
template：
<el-form-item label="地址：" >
<el-select v-model="prov">
<el-option v-for="option in arr" :value="option.name">
{{ option.name }}
</el-option>
</el-select>
<el-select v-model="city">
<el-option v-for="option in cityArr" :value="option.name">
{{ option.name }}
</el-option>
</el-select>
<el-collapse-transition>
<el-select v-model="district" v-if="district">
<el-option v-for="option in districtArr" :value="option.name">
{{ option.name }}
</el-option>
</el-select>
</el-collapse-transition>
<el-input placeholder="请输入收货人地址"></el-input>
</el-form-item>
script:
import arrAll from './assets/js/distList.js'
data(){
return {
prov: '广东',
city: '广州',
district: '荔湾区',
cityArr: [],
districtArr: [],
arr: arrAll
}
},
created(){
this.updateCity();
this.updateDistrict();
},
watch: {
prov: function () {
this.updateCity();
this.updateDistrict();
},
city: function () {
this.updateDistrict();
}
},
methods{
updateCity: function () {
try{
this.arr.forEach((item,index)=>{
if(item.name === this.prov){
this.cityArr = item.sub
foreach.break = new Error("StopIteration")
}
})
}catch(e){
if(e.message==="foreach is not defined") {
//console.log("...")
}else throw e
}
this.city = this.cityArr[1].name;
},
updateDistrict: function () {
try{
this.cityArr.forEach((item,index)=>{
if(item.name === this.city){
this.districtArr = item.sub
foreach.break = new Error("StopIteration")
}
})
}catch(e){
if(e.message==="foreach is not defined") {
//console.log("...")
}else throw e
}
if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
this.district = this.districtArr[1].name;
} else {
this.district = '';
}
}
}
distList.js
/**
* Created by AklanFun on 2017/11/13.
*/
const arrAll = [
{
name: "广东",
sub: [
{
name: "广州",
sub: [ {name: "越秀区"}, {name: "荔湾区"}, {name: "海珠区"}, {name: "天河区"}, {name: "白云区"}, {name: "黄埔区"}, {name: "番禺区"}, {name: "花都区"}, {name: "南沙区"}, {name: "萝岗区"}, {name: "增城市"}, {name: "从化市"}, {name: "其他"}],
type: 0
},
{
name: "深圳",
sub: [ {name: "福田区"}, {name: "罗湖区"}, {name: "南山区"}, {name: "宝安区"}, {name: "龙岗区"}, {name: "盐田区"}, {name: "其他"}],
type: 0
},
{
name: "珠海",
sub: [ {name: "香洲区"}, {name: "斗门区"}, {name: "金湾区"}, {name: "其他"}],
type: 0
},
{
name: "汕头",
sub: [ {name: "金平区"}, {name: "濠江区"}, {name: "龙湖区"}, {name: "潮阳区"}, {name: "潮南区"}, {name: "澄海区"}, {name: "南澳县"}, {name: "其他"}],
type: 0
},
{
name: "韶关",
sub: [ {name: "浈江区"}, {name: "武江区"}, {name: "曲江区"}, {name: "乐昌市"}, {name: "南雄市"}, {name: "始兴县"}, {name: "仁化县"}, {name: "翁源县"}, {name: "新丰县"}, {name: "乳源瑶族自治县"}, {name: "其他"}],
type: 0
},
{
name: "佛山",
sub: [ {name: "禅城区"}, {name: "南海区"}, {name: "顺德区"}, {name: "三水区"}, {name: "高明区"}, {name: "其他"}],
type: 0
},
{
name: "江门",
sub: [ {name: "蓬江区"}, {name: "江海区"}, {name: "新会区"}, {name: "恩平市"}, {name: "台山市"}, {name: "开平市"}, {name: "鹤山市"}, {name: "其他"}],
type: 0
},
{
name: "湛江",
sub: [ {name: "赤坎区"}, {name: "霞山区"}, {name: "坡头区"}, {name: "麻章区"}, {name: "吴川市"}, {name: "廉江市"}, {name: "雷州市"}, {name: "遂溪县"}, {name: "徐闻县"}, {name: "其他"}],
type: 0
},
{
name: "茂名",
sub: [ {name: "茂南区"}, {name: "茂港区"}, {name: "化州市"}, {name: "信宜市"}, {name: "高州市"}, {name: "电白县"}, {name: "其他"}],
type: 0
},
{
name: "肇庆",
sub: [ {name: "端州区"}, {name: "鼎湖区"}, {name: "高要市"}, {name: "四会市"}, {name: "广宁县"}, {name: "怀集县"}, {name: "封开县"}, {name: "德庆县"}, {name: "其他"}],
type: 0
},
{
name: "惠州",
sub: [ {name: "惠城区"}, {name: "惠阳区"}, {name: "博罗县"}, {name: "惠东县"}, {name: "龙门县"}, {name: "其他"}],
type: 0
},
{
name: "梅州",
sub: [ {name: "梅江区"}, {name: "兴宁市"}, {name: "梅县"}, {name: "大埔县"}, {name: "丰顺县"}, {name: "五华县"}, {name: "平远县"}, {name: "蕉岭县"}, {name: "其他"}],
type: 0
},
{
name: "汕尾",
sub: [ {name: "城区"}, {name: "陆丰市"}, {name: "海丰县"}, {name: "陆河县"}, {name: "其他"}],
type: 0
},
{
name: "河源",
sub: [ {name: "源城区"}, {name: "紫金县"}, {name: "龙川县"}, {name: "连平县"}, {name: "和平县"}, {name: "东源县"}, {name: "其他"}],
type: 0
},
{
name: "阳江",
sub: [ {name: "江城区"}, {name: "阳春市"}, {name: "阳西县"}, {name: "阳东县"}, {name: "其他"}],
type: 0
},
{
name: "清远",
sub: [ {name: "清城区"}, {name: "英德市"}, {name: "连州市"}, {name: "佛冈县"}, {name: "阳山县"}, {name: "清新县"}, {name: "连山壮族瑶族自治县"}, {name: "连南瑶族自治县"}, {name: "其他"}],
type: 0
},
{
name: "东莞",
sub: [],
type: 0
},
{
name: "中山",
sub: [],
type: 0
},
{
name: "潮州",
sub: [ {name: "湘桥区"}, {name: "潮安县"}, {name: "饶平县"}, {name: "其他"}],
type: 0
},
{
name: "揭阳",
sub: [ {name: "榕城区"}, {name: "普宁市"}, {name: "揭东县"}, {name: "揭西县"}, {name: "惠来县"}, {name: "其他"}],
type: 0
},
{
name: "云浮",
sub: [ {name: "云城区"}, {name: "罗定市"}, {name: "云安县"}, {name: "新兴县"}, {name: "郁南县"}, {name: "其他"}],
type: 0
},
{name: "其他"}
],
type: 1
},
{
name: "上海",
sub: [
{name: "黄浦区"}, {name: "卢湾区"}, {name: "徐汇区"}, {name: "长宁区"}, {name: "静安区"}, {name: "普陀区"}, {name: "闸北区"}, {name: "虹口区"}, {name: "杨浦区"}, {name: "宝山区"}, {name: "闵行区"}, {name: "嘉定区"}, {name: "松江区"}, {name: "金山区"}, {name: "青浦区"}, {name: "南汇区"}, {name: "奉贤区"}, {name: "浦东新区"}, {name: "崇明县"}, {name: "其他"}
],
type: 1
},
{
name: "江苏",
sub: [
{
name: "南京",
sub: [ {name: "玄武区"}, {name: "白下区"}, {name: "秦淮区"}, {name: "建邺区"}, {name: "鼓楼区"}, {name: "下关区"}, {name: "栖霞区"}, {name: "雨花台区"}, {name: "浦口区"}, {name: "江宁区"}, {name: "六合区"}, {name: "溧水县"}, {name: "高淳县"}, {name: "其他"}],
type: 0
},
{
name: "苏州",
sub: [ {name: "金阊区"}, {name: "平江区"}, {name: "沧浪区"}, {name: "虎丘区"}, {name: "吴中区"}, {name: "相城区"}, {name: "常熟市"}, {name: "张家港市"}, {name: "昆山市"}, {name: "吴江市"}, {name: "太仓市"}, {name: "其他"}],
type: 0
},
{
name: "无锡",
sub: [ {name: "崇安区"}, {name: "南长区"}, {name: "北塘区"}, {name: "滨湖区"}, {name: "锡山区"}, {name: "惠山区"}, {name: "江阴市"}, {name: "宜兴市"}, {name: "其他"}],
type: 0
},
{
name: "常州",
sub: [ {name: "钟楼区"}, {name: "天宁区"}, {name: "戚墅堰区"}, {name: "新北区"}, {name: "武进区"}, {name: "金坛市"}, {name: "溧阳市"}, {name: "其他"}],
type: 0
},
{
name: "镇江",
sub: [ {name: "京口区"}, {name: "润州区"}, {name: "丹徒区"}, {name: "丹阳市"}, {name: "扬中市"}, {name: "句容市"}, {name: "其他"}],
type: 0
},
{
name: "南通",
sub: [ {name: "崇川区"}, {name: "港闸区"}, {name: "通州市"}, {name: "如皋市"}, {name: "海门市"}, {name: "启东市"}, {name: "海安县"}, {name: "如东县"}, {name: "其他"}],
type: 0
},
{
name: "泰州",
sub: [ {name: "海陵区"}, {name: "高港区"}, {name: "姜堰市"}, {name: "泰兴市"}, {name: "靖江市"}, {name: "兴化市"}, {name: "其他"}],
type: 0
},
{
name: "扬州",
sub: [ {name: "广陵区"}, {name: "维扬区"}, {name: "邗江区"}, {name: "江都市"}, {name: "仪征市"}, {name: "高邮市"}, {name: "宝应县"}, {name: "其他"}],
type: 0
},
{
name: "盐城",
sub: [ {name: "亭湖区"}, {name: "盐都区"}, {name: "大丰市"}, {name: "东台市"}, {name: "建湖县"}, {name: "射阳县"}, {name: "阜宁县"}, {name: "滨海县"}, {name: "响水县"}, {name: "其他"}],
type: 0
},
{
name: "连云港",
sub: [ {name: "新浦区"}, {name: "海州区"}, {name: "连云区"}, {name: "东海县"}, {name: "灌云县"}, {name: "赣榆县"}, {name: "灌南县"}, {name: "其他"}],
type: 0
},
{
name: "徐州",
sub: [ {name: "云龙区"}, {name: "鼓楼区"}, {name: "九里区"}, {name: "泉山区"}, {name: "贾汪区"}, {name: "邳州市"}, {name: "新沂市"}, {name: "铜山县"}, {name: "睢宁县"}, {name: "沛县"}, {name: "丰县"}, {name: "其他"}],
type: 0
},
{
name: "淮安",
sub: [ {name: "清河区"}, {name: "清浦区"}, {name: "楚州区"}, {name: "淮阴区"}, {name: "涟水县"}, {name: "洪泽县"}, {name: "金湖县"}, {name: "盱眙县"}, {name: "其他"}],
type: 0
},
{
name: "宿迁",
sub: [ {name: "宿城区"}, {name: "宿豫区"}, {name: "沭阳县"}, {name: "泗阳县"}, {name: "泗洪县"}, {name: "其他"}],
type: 0
},
{name: "其他"}
],
type: 1
},
{
name: "浙江",
sub: [
{
name: "杭州",
sub: [ {name: "拱墅区"}, {name: "西湖区"}, {name: "上城区"}, {name: "下城区"}, {name: "江干区"}, {name: "滨江区"}, {name: "余杭区"}, {name: "萧山区"}, {name: "建德市"}, {name: "富阳市"}, {name: "临安市"}, {name: "桐庐县"}, {name: "淳安县"}, {name: "其他"}],
type: 0
},
{
name: "宁波",
sub: [ {name: "海曙区"}, {name: "江东区"}, {name: "江北区"}, {name: "镇海区"}, {name: "北仑区"}, {name: "鄞州区"}, {name: "余姚市"}, {name: "慈溪市"}, {name: "奉化市"}, {name: "宁海县"}, {name: "象山县"}, {name: "其他"}],
type: 0
},
{
name: "温州",
sub: [ {name: "鹿城区"}, {name: "龙湾区"}, {name: "瓯海区"}, {name: "瑞安市"}, {name: "乐清市"}, {name: "永嘉县"}, {name: "洞头县"}, {name: "平阳县"}, {name: "苍南县"}, {name: "文成县"}, {name: "泰顺县"}, {name: "其他"}],
type: 0
},
{
name: "嘉兴",
sub: [ {name: "秀城区"}, {name: "秀洲区"}, {name: "海宁市"}, {name: "平湖市"}, {name: "桐乡市"}, {name: "嘉善县"}, {name: "海盐县"}, {name: "其他"}],
type: 0
},
{
name: "湖州",
sub: [ {name: "吴兴区"}, {name: "南浔区"}, {name: "长兴县"}, {name: "德清县"}, {name: "安吉县"}, {name: "其他"}],
type: 0
},
{
name: "绍兴",
sub: [ {name: "越城区"}, {name: "诸暨市"}, {name: "上虞市"}, {name: "嵊州市"}, {name: "绍兴县"}, {name: "新昌县"}, {name: "其他"}],
type: 0
},
{
name: "金华",
sub: [ {name: "婺城区"}, {name: "金东区"}, {name: "兰溪市"}, {name: "义乌市"}, {name: "东阳市"}, {name: "永康市"}, {name: "武义县"}, {name: "浦江县"}, {name: "磐安县"}, {name: "其他"}],
type: 0
},
{
name: "衢州",
sub: [ {name: "柯城区"}, {name: "衢江区"}, {name: "江山市"}, {name: "龙游县"}, {name: "常山县"}, {name: "开化县"}, {name: "其他"}],
type: 0
},
{
name: "舟山",
sub: [ {name: "定海区"}, {name: "普陀区"}, {name: "岱山县"}, {name: "嵊泗县"}, {name: "其他"}],
type: 0
},
{
name: "台州",
sub: [ {name: "椒江区"}, {name: "黄岩区"}, {name: "路桥区"}, {name: "临海市"}, {name: "温岭市"}, {name: "玉环县"}, {name: "天台县"}, {name: "仙居县"}, {name: "三门县"}, {name: "其他"}],
type: 0
},
{
name: "丽水",
sub: [ {name: "莲都区"}, {name: "龙泉市"}, {name: "缙云县"}, {name: "青田县"}, {name: "云和县"}, {name: "遂昌县"}, {name: "松阳县"}, {name: "庆元县"}, {name: "景宁畲族自治县"}, {name: "其他"}],
type: 0
},
{name: "其他"}
],
type: 1
}
]
export default arrAll
