VUE2 前端实现 静态二级省市联动选择select

TIPs:

用了element UI的select选择器 <el-select>。

换成普通select也差不多。

数据没写南海诸岛，没写默认全国。

处理对应地级市的数据用的excel (笑)

✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

HTML:

<!--联动选择地区-->
                <el-form-item label="选择地区：">
                    <el-select size="small" style="width: 100px"
                               v-model="selectProv"
                               placeholder="请选择省份"
                               v-on:change="getProv($event)">
                        <el-option
                                v-for="item in provs"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select size="small" style="width: 100px"
                               v-if="selectProv!=''"
                               v-model="selectCity"
                               placeholder="请选择城市"
                               v-on:change="getCity($event)">
                        <el-option
                                v-for="item in citys"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

JS:

 export default {
        data() {
            return {
                provs:[{label:"北京市",value:"北京市"},
            {label:"天津市",value:"天津市"},
            {label:"河北省",value:"河北省"},
            {label:"山西省",value:"山西省"},
            {label:"内蒙古自治区",value:"内蒙古自治区"},
            {label:"辽宁省",value:"辽宁省"},
            {label:"吉林省",value:"吉林省"},
            {label:"黑龙江省",value:"黑龙江省"},
            {label:"上海市",value:"上海市"},
            {label:"江苏省",value:"江苏省"},
            {label:"浙江省",value:"浙江省"},
            {label:"安徽省",value:"安徽省"},
            {label:"福建省",value:"福建省"},
            {label:"江西省",value:"江西省"},
            {label:"山东省",value:"山东省"},
            {label:"河南省",value:"河南省"},
            {label:"湖北省",value:"湖北省"},
            {label:"湖南省",value:"湖南省"},
            {label:"广东省",value:"广东省"},
            {label:"广西壮族自治区",value:"广西壮族自治区"},
            {label:"海南省",value:"海南省"},
            {label:"重庆市",value:"重庆市"},
            {label:"四川省",value:"四川省"},
            {label:"贵州省",value:"贵州省"},
            {label:"云南省",value:"云南省"},
            {label:"西藏自治区",value:"西藏自治区"},
            {label:"陕西省",value:"陕西省"},
            {label:"甘肃省",value:"甘肃省"},
            {label:"青海省",value:"青海省"},
            {label:"宁夏回族自治区",value:"宁夏回族自治区"},
            {label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"},
            {label:"台湾省",value:"台湾省"},
            {label:"香港特别行政区",value:"香港特别行政区"},
            {label:"澳门特别行政区",value:"澳门特别行政区"}] ,
                citys: [],
                selectProv: '',
                selectCity: ''
            }
        },
        methods: {
            /*二级联动选择地区*/
            getProv: function (prov) {
                let tempCity=[];              
                this.citys=[];
                this.selectCity='';               
                let allCity=[{
                    prov: "北京市",
                    label: "北京市"
                }, {
                    prov: "天津市",
                    label: "天津市"
                }, {
                    prov: "河北省",
                    label: "石家庄市"
                }, {
                    prov: "河北省",
                    label: "唐山市"
                }, {
                    prov: "河北省",
                    label: "秦皇岛市"
                }, {
                    prov: "河北省",
                    label: "邯郸市"
                }, {
                    prov: "河北省",
                    label: "邢台市"
                }, {
                    prov: "河北省",
                    label: "保定市"
                }, {
                    prov: "河北省",
                    label: "张家口市"
                }, {
                    prov: "河北省",
                    label: "承德市"
                }, {
                    prov: "河北省",
                    label: "沧州市"
                }, {
                    prov: "河北省",
                    label: "廊坊市"
                }, {
                    prov: "河北省",
                    label: "衡水市"
                }, {
                    prov: "山西省",
                    label: "太原市"
                }, {
                    prov: "山西省",
                    label: "大同市"
                }, {
                    prov: "山西省",
                    label: "阳泉市"
                }, {
                    prov: "山西省",
                    label: "长治市"
                }, {
                    prov: "山西省",
                    label: "晋城市"
                }, {
                    prov: "山西省",
                    label: "朔州市"
                }, {
                    prov: "山西省",
                    label: "晋中市"
                }, {
                    prov: "山西省",
                    label: "运城市"
                }, {
                    prov: "山西省",
                    label: "忻州市"
                }, {
                    prov: "山西省",
                    label: "临汾市"
                }, {
                    prov: "山西省",
                    label: "吕梁市"
                }, {
                    prov: "内蒙古自治区",
                    label: "呼和浩特市"
                }, {
                    prov: "内蒙古自治区",
                    label: "包头市"
                }, {
                    prov: "内蒙古自治区",
                    label: "乌海市"
                }, {
                    prov: "内蒙古自治区",
                    label: "赤峰市"
                }, {
                    prov: "内蒙古自治区",
                    label: "通辽市"
                }, {
                    prov: "内蒙古自治区",
                    label: "鄂尔多斯市"
                }, {
                    prov: "内蒙古自治区",
                    label: "呼伦贝尔市"
                }, {
                    prov: "内蒙古自治区",
                    label: "巴彦淖尔市"
                }, {
                    prov: "内蒙古自治区",
                    label: "乌兰察布市"
                }, {
                    prov: "内蒙古自治区",
                    label: "兴安盟"
                }, {
                    prov: "内蒙古自治区",
                    label: "锡林郭勒盟"
                }, {
                    prov: "内蒙古自治区",
                    label: "阿拉善盟"
                }, {
                    prov: "辽宁省",
                    label: "沈阳市"
                }, {
                    prov: "辽宁省",
                    label: "大连市"