vue省市区遍历数据

最新推荐文章于 2024-07-27 20:23:40 发布

mslmhl

最新推荐文章于 2024-07-27 20:23:40 发布

阅读量2k

点赞数 1

文章标签： vue省市区遍历数据

本文链接：https://blog.csdn.net/mslmhl/article/details/110879295

版权

本文介绍了一种在Vue中处理省市区联动下拉菜单的方法，通过监听select的点击事件，动态更新市和区的数据。首先将后台返回的省市区数据存储到dataList，然后在省的选择中触发事件获取市数据并赋值给cityList，接着在市的选择中触发事件获取区数据并赋值给areaList，以此实现三级联动效果。

摘要由CSDN通过智能技术生成

省市区遍历数据

一般项目中都会省市区然后从后台获取数据，遍历前台（我的大哥交给我一个简单的方法）

先说页面布局（省市区）是同级的，【也有可能是嵌套型】

这种情况的：
在这里插入图片描述
拿到后台数据后，先看一下数据结构一般都是：[{ “name”: “北京市”,[{ “name”: “北京市”,[]}]},{},{}]

思路：在vue中这样写（不管在什么框架下写，思路都是一样的）

重点: 给select>option 加事件，必须的 @click.native=“事件名”
<select> <option v-for="(item.index) in dataList" :key="index" @click.native=“事件名(item)”></option></select>

先把后台返回的数据放到dataList中【这个名字可以随便起】，然后再省份中遍历，遍历完后，需要在省份的select的option中声明点击事件，然后把市跟区传过去，然后再事件中给data中的新的变量cityList赋值，此时的cityList中就只有市跟区了，
然后再市的下拉菜单中遍历cityList，然后再市的select的option中声明事件把区传过去，然后再事件中给data中的新的areaList赋值，此时的areaList就只有区
然后在区的select的option中直接遍历就可以

html页面

省：

  <Select
              v-model="formValidate.province"
              placeholder="请选择所在省份"
              class="input-content"
            >
              <Option
                :value="item.name"
                v-for="(item, index) in dataList"
                :key="index"
                @click.native="getProvinceItem(item)"
                >{{ item.name }}</Option
              >
            </Select>

市：

 <Select
              v-model="formValidate.city"
              placeholder="请选择所在市"
              class="input-content"
            >
              <Option
                :value="item.name"
                v-for="(item, index) in cityList"
                :key="index"
                @click.native="getCityItem(item)"
                >{{ item.name }}</Option
              >
            </Select>

区：

 <Select
              v-model="formValidate.area"
              placeholder="请输入区"
              class="input-content"
            >
              <Option :value="item" v-for="(item,index) in areaList" :key="index">{{item}}</Option>
            </Select>

js：

data(){
return{
  	 dataList: [], //下拉菜单数据 存的是所有的数据
      cityList: [], //存储所有的市 和区
      areaList:[], //存储所i有的区
		}
},
created(){
this.dataList = data;
},
methods:{
 // 取出来所有的市
    getProvinceItem(item) {
      this.cityList = item.city;
    },
    // 取出来所有的区
    getCityItem(item) {
      this.areaList = item.area;
    },
}