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

表单代码

<template>
    <div class="page-address">
        <div class="address-title">
            <span>可用收货地址</span>
        </div>
        <div class="address-not" v-if="userAddress == null || userAddress.length == 0">
            <div class="address-not-msg">
                <span>您还未设置地址哦</span>
            </div>
            <div class="address-not-button">
                <Button type="primary" @click="addModal = true">添加收货地址</Button>

                <Modal v-model="addModal" width="600" :mask-closable="false">

                    <p slot="header" style="color:#f60;text-align:center">
                        <span>新增收货地址</span>
                    </p>

                    <div style="margin-left: 30px;font-size: 14px;">
                        <span style="color:#CCD0D7">当前配送至:</span><span style="font-weight: bold;margin-left: 20px;">中国大陆</span>
                    </div>
                    <div style="margin-top: 20px;">
                        <!-- <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> -->
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
                            <FormItem label="收货人姓名" prop="name">
                                <Input v-model="formValidate.name" placeholder="长度不超过18个字符哦"></Input>
                            </FormItem>
                            <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>
                            <FormItem label="详细地址" prop="desc">
                                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" 
                                placeholder="请输入详细地址信息，如街道，小区，门牌号，楼栋号，单元等信息"></Input>
                            </FormItem>
                            <FormItem label="手机号码" prop="mobile">
                                <Input v-model="formValidate.mobile" placeholder="请填写正确可用的手机号哦"></Input>
                            </FormItem>
                            <FormItem prop="interest">
                                <Checkbox v-model="formValidate.interest">
                                    <span>设置为默认收货地址</span>
                                </Checkbox>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">添加</Button>
                            </FormItem>
                        </Form>
                    </div>
                    <!-- 对话框页脚 删除按钮 -->
                    <div slot="footer">
                    </div>
                </Modal>
            </div>
        </div>
    </div>
</template>

关键代码

<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(){
            var regPhone=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
            const validatePhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请填写手机号'));
                } else if (!regPhone.test(value)) {
                    callback(new Error('请输入正确手机号'));
                } else {
                    callback();
                }
            };
            return{
                isMultiple: false,
                provinceArr: [],
                citiesArr: [],
                countyArr:[],
                formValidate: {
                    province: '',
                    city: '',
                    county: '',
                    // 地址是否为默认地址
                    interest: false,
                    mobile: '',
                    // 地址详情
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '收货人姓名不能为空哦', trigger: 'blur' },
                        { type: 'string', min: 2,max: 18, message: '收货人姓名应在2到18个字符哦', trigger: 'blur' }
                    ],
                    province: [
                        { required: true, message: '请选择收货地所属的省份', trigger: 'change' }
                    ],
                    city: [
                        { required: true, message: '请选择收货地所属的市', trigger: 'change' }
                    ],
                    county: [
                        { required: true, message: '请选择收货地所属的区县', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写收货地的详细信息', trigger: 'blur' },
                        // { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ],
                    mobile: [
                        { validator: validatePhone, trigger: 'blur' }
                    ]
                }
            }
        },
        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>

效果