vue+mint ui+省市区三级联动（编辑地址）

---

先去下载一个“省份、城市、区县” 三级联动数据

存为json引入页面

import s from '../../components/address.json';

html使用mint ui中的 mt-field以及mt-popup，点击所在地区，上选框出现。

<mt-field @click.native.capture="getAreaList" class="bor-b" label="所在地区" type="text" v-model="city" readonly disableClear>&gt</mt-field>

<mt-popup v-model="popupVisible" position="bottom">
    <mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5" ></mt-picker >
</mt-popup>

组件使用方法

<script>
import s from '../../components/address.json';
import { Toast,Indicator,MessageBox } from 'mint-ui';

export default {
    data(){
        return{
            address_id:'',
            city:'',
            address:'',
            name:'',
            mobile:'',
            city:"请选择区域",
            popupVisible:false,
            addressSlots: [
                {
                    flex: 1,
                    defaultIndex: 1,
                    values: Object.keys(s),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot3',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot5',
                    textAlign: 'center'
                }
            ],
            addressProvince: '省',
            addressCity: '市',
            addressXian:'区',
        }
    },
    methods:{
    //获取地区列表
      getAreaList : function(){
            getAreaList().then(response =>{
                let code = response["code"];
                if(code == "200"){
                    var length = response['areaList'].length;
                    this.area_vals = [];
                    this.area_ids = [];
                    for(var i=0;i<length;i++){
                        this.area_vals.push(response['areaList'][i].name);
                        this.area_ids.push(response['areaList'][i].area_id);
                    }
                    //出现选框
                    this.popupVisible = true;

                }else{
                    Toast({message: response["message"],position: 'bottom',duration: 1000});
                }
            })
        },


        onAddressChange(picker, values) {
            if(!values[0]) {
                return
            }//对应省市区
            let sheng = Object.keys(s);
            let shi = Object.keys(s[values[0]]);
            let xian = s[values[0]][values[1]];
            picker.setSlotValues(0, sheng);
            picker.setSlotValues(1, shi);
            picker.setSlotValues(2, xian);
            this.city = values[0] + ' ' + values[1] + ' ' + values[2];
        },
        //返回上一页
        handleback(){
          this.$router.back();
        },
        //保存编辑地址
        saveEditAddress(){
            Indicator.open();
            var params = new URLSearchParams();
            params.append('address_id', this.address_id);
            params.append('city', this.city);
            params.append('address', this.address);
            params.append('name', this.name);
            params.append('mobile', this.mobile);
            updateAddress(params).then(response =>{
                Indicator.close();
                let code = response["code"];
                if(code == "200"){
                    this.$router.push('/manageadress');
                }else{
                    Toast({message: response["message"],position: 'bottom',duration: 1000});
                }
            })
        },
        //删除地址
        deleteAddress(item){
            Indicator.open();
            var params = new URLSearchParams();
            params.append('address_id', this.address_id);
            deleteAddress(params).then(response =>{
                Indicator.close();
                let code = response["code"];
                if(code == "200"){
                    this.$router.push('/manageadress');
                }else{
                    Toast({message: response["message"],position: 'bottom',duration: 1000});
                }
            })
        },
        delAddress(item){
            MessageBox.confirm('确定要删除此地址?')
            .then(action => {
                this.deleteAddress(item);
            }).catch(err => {
            });
        }
    },
    mounted(){
    //获取编辑前的信息
        this.address_id = this.$route.query.address_id;
        this.city = this.$route.query.city;
        this.address = this.$route.query.address;
        this.name = this.$route.query.name;
        this.mobile = this.$route.query.mobile;

    },
}
</script>

---

效果

---

参考资料