vue实现下拉二级联动_Vue实现三级联动/多级联动/城市选择

我网上搜了一圈，发现没什么具体教程，所以我出一个详细点的教程吧

重点是要找到思路，其实不难的。估计也是因为不难所以网上才没具体教程的吧

效果图.png

准备一串Json的数据

json数据就是对象格式和数组格式互相嵌套，在这里大家可以下载我这个(其实我也是下载别人的)，本教程也是用这个来实现的

链接: https://pan.baidu.com/s/1yY2mqHlIKSixx8oI2tsNyA 提取码: qqxf

直接用 的方式导入就行了

一共要新建6个变量

因为这里用到的是三个下拉框，分别用v-model进行双向数据绑定，

三个下拉框都有进行v-for的遍历，它们遍历要用到三个数组

新建三个下拉框，分别用v-model进行双向数据绑定

html代码

arrAll是我们上面下载过来的items.js里的变量名，大家可以打开看看。

因为上面已经导入了，这里直接使用就行了

JS代码：

data: {

province: '', // 省份

city: '', // 市

county: '', // 县/区

arr: arrAll, // 所有城市的数据，已经在items.js里面定义了

cityArr:[],

countyArr:[],

},

先把第一个下拉框通过v-for遍历出来

{{item.name}}

i效果图1.png

到这一步应该都很简单，没什么难的。重点是如何、通过什么条件遍历后两个下拉框呢？

其实很简单的，因为我上面已经通过v-model绑定了下拉框，也就是我们在下拉框选择了一个省份的时候，data里面的province也会跟着变化，

这时候我们先给第一个下拉框通过@change绑定一个函数，然后根据这个province来作为条件筛选出我们想要的第二个下拉框city：市 的数据就OK了

@change：当表单元素的值发生改变的时候执行函数

根据条件筛选数组

先将整个数组arr遍历出来，然后通过if筛选数组，在上面我们已经定义了一个cityArr的数组，在这里只需要将它的值更新为筛选得到的数组就行了

JS代码

getCity() {

for (var i = 0; i < this.arr.length; i++) {

var obj = this.arr[i] // 因为要多次调用，所以用个变量来保存它

if (this.province == obj.name ) { // 如果下拉框选择的 province 等于遍历得到的 obj.name

this.cityArr= obj.sub; // 数组 cityArr 的值就等于遍历得到的 obj.sub 数组

}

}

}

此时，cityArr的值就能根据我们第一个下拉框的选择来动态更新了，随后第二个下拉框直接遍历这个数组就OK了

{{item.name}}

{{item.name}}

image.png

第三个下拉框也是一样的，根据第二个下拉框的选择来进行遍历，然后得到的数组保存给countyArr

最后直接上完整代码

HTML部分

{{item.name}}

{{item.name}}

{{item.name}}

JS部分

let vm = new Vue({

el: '#app',

data: {

province: '',

city: '',

county: '',

arr: arrAll,

cityArr:[],

countyArr:[],

},

methods: {

getCity() {

for (var i = 0; i < this.arr.length; i++) {

var obj = this.arr[i]

if (this.province == obj.name ) {

this.cityArr = obj.sub;

}

}

},

getCounty() {

for (var i = 0; i < this.cityArr.length; i++) {

var obj = this.cityArr[i]

if (this.city == obj.name ) {

this.countyArr = obj.sub;

}

}

}

}

})

其实我们可以发现，并没有什么难点或者新的知识点，就是简单的遍历和判断而已。

还有个小bug，我们选好省市区之后，如果更改第一个下拉框的内容，第三个框不会跟着变。我们只需要给第一个下拉框绑定的函数getCity()添加一个表达式this.countyArr = '';就行了