vue+json自定义实现省市区三级联动下拉列表（独立select）

Posted 2021-11-24 尔嵘

效果：实现三个独立的下拉框，没有使用elementUI那种效果。

 

代码：

（1）template：

<div style="display: flex">
    <div class="future_mix3">
        <!-- <span>选择省</span> -->
        <select v-model="prov" @change="updataCity();updataSub()" style="background: rgb(4, 16, 59);color: #fff;border: 1px solid rgb(4, 16, 59)">
            <option v-for="v in arr">{{v.name}}</option>
        </select>
    </div>
    <div class="future_mix3">
        <!-- <span>选择市</span> -->
        <select v-model="city" @change="updataSub()" v-if="city" style="background: rgb(4, 16, 59);color: #fff;border: 1px solid rgb(4, 16, 59)">
            <option v-for="v in cityArr">{{v.name}}</option>
        </select>
    </div>
    <div class="future_mix3">
        <!-- <span>选择区</span> -->
        <select v-model="sub" v-if="sub" style="background: rgb(4, 16, 59);color: #fff;border: 1px solid rgb(4, 16, 59)">
            <option v-for="v in subArr">{{v}}</option>
        </select>
    </div>
</div>

（2）js：

<script>
import jsonData from '@/assets/json/city.json';
export default {
  data() {
    return {
      arr: jsonData,//省市区json数据
      prov: "", //被选择的省
      cityArr: [], //选择对应省的市数据
      city: "", //被选择的市
      sub: "", //被选择的区
      subArr: [], //选择对应市的区数据
    }
  },
  methods: {
    //选择市
    updataCity() {
      this.arr.forEach((item, index) => {
        if (item.name == this.prov) {
          // this.cityArr = item.sub;
          this.cityArr = item.city;
        }
      });
      this.city = this.cityArr[0].name;
    },

    //选择区数据
    updataSub() {
      this.cityArr.forEach((item, index) => {
        if (item.name == this.city) {
          // this.subArr = item.sub;
          this.subArr = item.area;
        }
      });
      this.sub = this.subArr[0];
    },
  },
}
</script>

（3）json文件：

json完整文件地址：https://download.csdn.net/download/XU441520/35075747

注意：如果是没有积分，麻烦您点个关注，我可以免费给您！

（4）json格式：

[
    {
        "name":"北京",
        "city":[
            {
                "name":"北京",
                "area":[
                    "东城区",
                    "西城区",
                    "崇文区",
                    "宣武区",
                    "朝阳区",
                    "丰台区",
                    "石景山区",
                    "海淀区",
                    "门头沟区",
                    "房山区",
                    "通州区",
                    "顺义区",
                    "昌平区",
                    "大兴区",
                    "平谷区",
                    "怀柔区",
                    "密云县",
                    "延庆县"
                ]
            }
        ]
    },
    ...
]