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

来源：互联网发布：鲁班bim软件编辑：程序博客网时间：2024/05/29 17:12

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

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

效果

这里写图片描述

参考资料

阅读全文

0 0