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

表单关键代码

<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>

效果图