element+el-cascader省市区级联框使用

首先 npm install element-china-area-data 或者 cnpm install element-china-area-data

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

注释：/*provinceAndCityData是省市二级联动数据（不带“全部”选项）

regionData是省市区三级联动数据（不带“全部”选项）

provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）

regionDataPlus是省市区三级联动数据（带“全部”选项） "全部"选项绑定的value是空字符串""

CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市

TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105 */

省市区三级联动（不带“全部”选项）代码：

<template>

 <el-form :model="form" :rules="rules" ref="ruleForm">

            <el-form-item label="地理位置" prop="selectedOptions">

                <el-cascader size="large" :options="options" v-model="form.selectedOptions" @change="handleChange" style="width:40%;"></el-cascader>

            </el-form-item>

 </el-form>

</template>

<script>

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

    export default {

        data() {

            return {

                form: {

                    selectedOptions:[],

                    provinceId:null,

                    provinceName: "", //省

                    cityId:null,

                    cityName: "", //市

                    regionId:null,

                    regionName: "", // 区,

                },

                rules: {

                    selectedOptions: [

                        { required: true, message: '请选择地理位置', trigger: 'change' }

                    ],

                },

                options: regionData,

                selectedOptions:[],

                CodeToText:CodeToText,

            }

        },

        methods: {

            handleChange (value) {

                this.form.provinceId = value[0]

                this.form.provinceName = CodeToText[value[0]]

                this.form.cityId = value[1]

                this.form.cityName = CodeToText[value[1]]

                this.form.regionId = value[2]

                this.form.regionName = CodeToText[value[2]]

            },

        },

    }

</script>