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

效果圖