基于vue+iview实现省市区三级联动

最新推荐文章于 2025-04-16 16:46:25 发布

哈哈hyc

最新推荐文章于 2025-04-16 16:46:25 发布

阅读量1.8k

点赞数 1

分类专栏：前端前端——vue 文章标签： vue iview json javascript vue.js

本文链接：https://blog.csdn.net/erdfty/article/details/105706882

版权

前端同时被 2 个专栏收录

64 篇文章

订阅专栏

前端——vue

22 篇文章

订阅专栏

本文介绍如何在Vue项目中实现省市区三级联动的表单选择功能，通过axios读取本地json文件，利用v-model和@on-change实现数据双向绑定与联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单关键代码

<FormItem prop="province" label="省份">
    <Select v-model="formValidate.province" placeholder="请选择省份" @on-change="changeProvince">
        <Option v-for="(item,index) in provinceArr" :key="item.value" :value="item.value" >{{ item.label }}</Option>
    </Select>
</FormItem>
<FormItem prop="city" label="城市">
    <Select v-model="formValidate.city" placeholder="请选择城市" @on-change="changeCity">
        <Option v-for="(item,index) in citiesArr" :key="item.value" :value="item.value" >{{ item.label }}</Option>
    </Select>
</FormItem>
<FormItem prop="county" label="区县">
    <Select v-model="formValidate.county" placeholder="请选择区县">
       <Option v-for="(item,index) in countyArr" :key="item.value" :value="item.value" >{{ item.label }}</Option>
    </Select>
</FormItem>

使用@on-change事件进行联动

vue读取本地省市区json文件

created(){
      this.$axios.get('http://localhost:8080/static/json/provinces.json').then((data) => {
          this.provinceArr = data.data.data
      })
}

不知道有没更好的获取办法，网上找了好久，省市区json是在网上找的，然后自己修改了一点，链接：文件地址

需要的js部分代码

<script>
    export default {
        data(){
            return{
                provinceArr: [],
                citiesArr: [],
                countyArr:[],
                ruleValidate: {
                    province: [
                        { required: true, message: '请选择收货地所属的省份', trigger: 'change' }
                    ],
                    city: [
                        { required: true, message: '请选择收货地所属的市', trigger: 'change' }
                    ],
                    county: [
                        { required: true, message: '请选择收货地所属的区县', trigger: 'change' }
                    ],
                }
            }
        },
        created(){
            this.$axios.get('http://localhost:8080/static/json/provinces.json').then((data) => {
                this.provinceArr = data.data.data
            })
        },
        methods: {
            changeProvince(val){
            for(var i=0; i<this.provinceArr.length; i++){
                if(val == this.provinceArr[i].value ){
                    this.citiesArr = this.provinceArr[i].children
                    this.formValidate.county = ''
                    this.countyArr = []
                }
            }
        },
        changeCity(val){
            for(var i=0; i<this.citiesArr.length; i++){
                if(val == this.citiesArr[i].value ){
                    this.countyArr = this.citiesArr[i].children
                }
            }
        }
    }
}
</script>

效果图