el-select全国省市区镇四级联动

由于是从主体上拆分出来的,逻辑可能有点乱,主要是记录下拉框如何获取四级JSON数据。

三级、四级联动JSON数据在GitHub里下载吧,原地址忘了

GitHub项目Demo地址:https://github.com/Beingyo/vue-test-template/tree/main/src/page/wholeNation

示例:

代码:

<template>
    <div>
        <el-button @click="isShow">点击打开</el-button>
        <el-dialog
            v-if="isvisible"
            :visible.sync="isvisible"
            :close-on-click-modal="false"
            :show-close="true"
            :before-close="cancel"
            title="收货地址"
            width="800px"
            center>
            <hr>
            <div class="content">
                <el-form :inline="true" ref="formdata" :model="formdata" :rules="formrule" class="form">
                    <el-form-item label="收件人" prop="recipient">
                        <el-input v-model="formdata.recipient" class="recipient"/>
                    </el-form-item>
                    <el-form-item label="收件人电话" prop="areaCode">
                        <el-select v-model="formdata.areaCode" class="phone-select">
                            <el-option v-for="item in cities" :key="item.value" :label="item.value" :value="item.value">
                                <span style="">{{ item.label }}</span>
                                <span style="">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="mobile">
                        <el-input v-model="formdata.mobile" class="mobile" type="text"/>
                    </el-form-item>
                    <!--切换国区-->
                    <el-form-item label="收件地址" prop="isForeign">
                        <el-radio-group v-model="isForeign" label-width="100px" @change="selectAddress('formdata')">
                            <el-radio @change="addreShow(item.value)" v-for="item in country" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <br>
                    <!--省-->
                    <el-form-item v-if="addressShow === 0" prop="province">
                        <el-select v-model="formdata.province" placeholder="选择省" @change="selectProvince" calss="slelect-province" style="width: 142px;">
                            <el-option
                                v-for="item in provinceData"
                                :key="item.code"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--市-->
                    <el-form-item v-if="addressShow === 0" prop="city">
                        <el-select v-model="formdata.city" placeholder="选择市" @change="selectCity" class="slelect-city" style="width: 142px;">
                            <el-option
                                v-for="item in cityData"
                                :key="item.code"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--区-->
                    <el-form-item v-if="addressShow === 0" prop="area">
                        <el-select v-model="formdata.area" placeholder="选择区" @change="selectArea" class="slelect-area" style="width: 142px;">
                            <el-option
                                v-for="item in areaData"
                                :key="item.code"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--镇-->
                    <el-form-item v-if="addressShow === 0" prop="town">
                        <el-select v-model="formdata.town" placeholder="选择镇" @change="selectTown" class="slelect-town" style="width: 142px;">
                            <el-option
                                v-for="item in townData"
                                :key="item.code"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--国内地址-->
                    <el-form-item label="具体街道" v-if="addressShow === 0" prop="street">
                        <el-input v-model="formdata.street" class="address-in" type="text"/>
                    </el-form-item>
                    <!--国际地址-->
                    <el-form-item v-if="addressShow === 1" prop="street" style="margin-top: -20px">
                        <el-input v-model="formdata.street" class="address-out" type="text"/>
                    </el-form-item>
                    <el-form-item label="默认地址">
                        <el-switch v-model="defaultAddress"></el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button type="primary" class="save" @click="save('formdata')">确定</el-button>
                <el-button type="primary" class="cancel" @click="cancel('formdata')">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import addressData from './addressData4.json'
    export default {
        name: 'EditAddress',
        data() {
            const validatePhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('手机号不能为空'))
                }
                        // else if () {
                        //   callback(new Error('手机格式不正确'))
                // }
                else {
                    callback()
                }
            }
            const validateCity = (rule, value, callback) => {
                if (!value) {
                    if (this.cityFlag === 0) {
                        callback(new Error('请选择市'))
                    }
                }
                else {
                    callback()
                }
            }
            const validateArea = (rule, value, callback) => {
                if (!value) {
                    if (this.areaFlag === 0) {
                        callback(new Error('请选择区'))
                    }
                }
                else {
                    callback()
                }
            }
            const validateTown = (rule, value, callback) => {
                if (!value) {
                    if (this.townFlag === 0) {
                        callback(new Error('请选择镇'))
                    }
                }
                else {
                    callback()
                }
            }
            const validateStreet = (rule, value, callback) => {
                if (!value) {
                    if (this.streetFlag === 0) {
                        callback(new Error('地址不能为空'))
                    }
                }
                else {
                    callback()
                }
            }
            return {
                formrule: {
                    recipient: [{required: true, trigger: 'blur', message: '用户名不能为空'}],
                    mobile: [{required: true, trigger: 'blur', validator: validatePhone}],
                    areaCode: [{required: true, trigger: 'change', message: '请选择手机地区'}],
                    isForeign: [{required: true, trigger: 'change', message: '请选择地址'}],
                    province: [{required: true, trigger: 'change', message: '请选择省'}],
                    city: [{required: true, trigger: 'change', validator: validateCity}],
                    area: [{required: true, trigger: 'change', validator: validateArea}],
                    town: [{required: true, trigger: 'change', validator: validateTown}],
                    street: [{ trigger: 'blur', validator: validateStreet}],
                },
                addressValue: 1,
                formdata: {
                    webAddressId: 5,
                    recipient: '',
                    mobile: '',
                    areaCode: '+86',
                    isForeign: 1,
                    province: '',
                    city: '',
                    area: '',
                    town: '',
                    street: ''
                },
                cities: [
                    { value: '+86', label: '中国' },
                    { value: '+886', label: '中国台湾' },
                    { value: '+84', label: '越南' },
                    { value: '+81', label: '日本' },
                    { value: '+1', label: '美国' }
                ],
                country: [
                    { value: 1, label: '国际' },
                    { value: 0, label: '国内' }
                ],
                isvisible: false,
                // 控制国际/国内地址显示
                addressShow: 1,
                // 省数据
                provinceData: [],
                // 市数据
                cityFlag: 0,
                cityData: [],
                // 区数据
                areaFlag: 0,
                areaData: [],
                // 镇数据
                townFlag: 0,
                townData: [],
                streetFlag: 0,
                // 默认地址状态
                defaultAddress: 0
            }
        },
        created() {
            this.loadData()
        },
        methods: {
            isShow() {
                this.is()
            },
            is() {
                this.isvisible = true
            },
            addreShow(value) {
                this.addressShow = value
                console.log('选择了地区:' + value)
            },
            // 加载省市区镇数据
            loadData() {
                this.provinceData = addressData
            },
            // 切换地区
            selectAddress(formName) {
                this.streetFlag = 1
                this.formdata.street = ''
                this.$refs[formName].resetFields();
                this.formdata.addressValue = this.addressValue
                console.log('切换了地区')
            },
            // 选择省
            selectProvince(value) {
                this.provinceData.forEach((item, index) => {
                    if (item.name === value) {
                        this.cityData = item.children
                        this.formdata.city = ''
                        this.cityFlag = 1
                        this.formdata.area = ''
                        this.areaFlag = 1
                        this.formdata.town = ''
                        this.townFlag = 1
                        this.areaData = []
                        this.townData = []
                        return false
                    }
                })
                console.log('选择了省' + value)
            },
            // 选择市
            selectCity(value) {
                this.cityData.forEach((item, index) => {
                    if (item.name === value) {
                        this.areaData = item.children
                        this.formdata.area = ''
                        this.areaFlag = 1
                        this.formdata.town = ''
                        this.townFlag = 1
                        this.townData = []
                        return false
                    }
                })
                console.log('选择了市' + value)
            },
            // 选择区
            selectArea(value) {
                this.areaData.forEach((item, index) => {
                    if (item.name === value) {
                        this.townData = item.children
                        this.formdata.town = ''
                        this.townFlag = 1
                        return false
                    }
                })
                console.log('选择了区' + value)
            },
            // 选择镇
            selectTown(value) {
                console.log('选择了镇' + value)
            },
            save(formName) {
                this.cityFlag = 0
                this.areaFlag = 0
                this.townFlag = 0
                this.streetFlag = 0
                console.log('提交数据:' + JSON.stringify(this.formdata) + '\n默认地址:' + this.defaultAddress )
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('点击')
                    } else {
                        return false
                    }
                })
            },
            cancel(formName) {
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields()
                } else {
                    this.formdata.name = ''
                }
                this.isvisible = false
            }
        }
    }
</script>

<style scoped lang="scss">
    /deep/ .el-dialog__title {
        color: #606060;
    }

    /deep/ .el-form-item__label {
        color: #333333;
    }

    /deep/ .el-dialog__body {
        padding: 0;
    }

    /deep/ .el-dialog__footer {
        text-align: center;
        padding: 10px 100px 45px;
    }
    .content {
        width: 700px;
        background-color: #F7F7F7;
        margin: 0 auto;
        margin-top: 10px;
        padding: 20px 25px 0;
    }
    .form {
    .name {
        width: 200px;
    }
    .phone-select {
        width: 80px;
        margin-right: -16px;
    /deep/ .el-input__inner {
        border-right-color: transparent;
        border-radius: 0;
    }
    }
    .phone {
        width: 160px;
    /deep/ .el-input__inner {
        border-radius: 0;
    }
    }
    .address-out {
        width: 610px;
    }
    .address-in {
        width: 542px;
    }
    .slelect-province {
    }
    .slelect-city {
    }
    .slelect-area {
    }
    .slelect-town {
    }
    }

    .save {
        width: 100px;
        transform: translateX(-13px);
    }

    .cancel {
        width: 100px;
    }

</style>
注:本文可分享可转发,转发请注明出自bug源
posted @ 2021-03-31 13:50  bugSource  阅读(25)  评论(0编辑  收藏  举报