vue element-china-area-data使用详解

城市选择器插件参考：https://www.npmjs.com/package/element-china-area-data

使用前提vue相关配置已准备好

安装

npm install element-china-area-data -S

使用时在scrip中先进行引用在使用,前面代表不同的格式

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

我使用的

    import {  regionData,CodeToText,TextToCode } from 'element-china-area-data'

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

在return里

return {
                form:{
                    provinces:"",
                    city:"",
                    area:""
                },
                options: regionData,
                selectedOptions: [],
                }

在form表单里

<el-form-item label="维修厂地址" prop="address">
                    <el-cascader
                            size="large"
                            :options="options"
                            v-model="selectedOptions"
                            @change="handleChange">
                    </el-cascader>
                </el-form-item>

方法method里

//省市区三级联动事件
            handleChange (value) {
            // this.edit();
                console.log(value)
                if (value[1] != null && value[2] != null) {
                    var dz = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + CodeToText[value[2]]

                } else {
                    if (value[1] != null) {
                        dz = CodeToText[value[0]] + '/' + CodeToText[value[1]]
                    } else {
                        dz = CodeToText[value[0]]
                    }
                }
                this.mtShopForm.address = dz

                this.form.provinces= CodeToText[this.selectedOptions[0]]
                this.form.city= CodeToText[this.selectedOptions[1]]
                this.form.area= CodeToText[this.selectedOptions[2]]
            },

在修改回显里

//修改回显
            selectById(id){

                this.editMtShopDialog=true;
                var that=this;
                this.$http.get(`/maintain/shop/selById/${id}`).then(function (resp) {
                    that.mtShopForm=resp.data.result.MtShop;
                    let strings=resp.data.result.MtShop.address.split("/")

                    that.form.provinces=strings[0];
                    that.form.city=strings[1];
                    that.form.area=strings[2];
                    that.selectedOptions=[
                        TextToCode[that.form.provinces].code,
                        TextToCode[that.form.provinces][that.form.city].code,
                        TextToCode[that.form.provinces][that.form.city][that.form.area].code]
                })

            },

效果

回显