element选择省市二级联动,选择省市区三级联动，省市回显，省市区回显，省区编码回显，Cascader级联选择器清除(保姆级别教程，就看这一边文章就够了，你想要的全都有非常详细)

需要element选择省市二级联动,选择省市区三级联动，效果图如下

二级(省市)联动三级联动(省市区)讲解和步骤教程
首先npm下载省市区这个插件 npm install element-china-area-data -S
安装好之后在项目需要用到的地方引入

import { CodeToText, provinceAndCityData, TextToCode } from 'element-china-area-data' //导入地图数据

有想了解可以引入哪些的可以自己了解看看

CodeToText：城市编码转城市文字(用于像后台发送请求)
TextToCode：文本转换编码(用于回显)
provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项） “全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码
用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

三级联动(省市区)引入这个regionData，将provinceAndCityData删除

 import { CodeToText, regionData, TextToCode } from 'element-china-area-data' //导入地图数据

二级(省市)联动如下图，引入provinceAndCityData

<el-form-item label="选择省市：" prop="selectedOptions">
          <el-cascader size="large" clearable ref="cascader" :options="options" v-model="params.selectedOptions" @change="handleChange" class="w250">
          </el-cascader>
        </el-form-item>

data() {
    return {
      options: provinceAndCityData,
      params:{
      //params为向后台发送请求的请求体,为什么要将selectedOptions写在请求体中请向后看
      		selectedOptions: [],
      		//如果校验省市必须传，可加上element表单校验
      		rules: {		
				selectedOptions: [{ required: true, message: '请选择省市', trigger: 'change' }],	
				    }
      } 
    }
  },
  methods: {
	 // 地图
    handleChange(e) {
      //因为上边选择好城市之后打印出来的是编码，这里是将编码转换为文字
      let province = CodeToText[this.params.selectedOptions[0]] //省
      let city = CodeToText[this.params.selectedOptions[1]] //市
      let area=CodeToText[this.params.selectedOptions[2]] //区(三级联动带区的话可以加上这个，二级联动不需要这个)
      if (city == '市辖区') {//选择北京市的话，第二个选项为输入框
        city = province //这里根据后台需求，给它赋值，我这里是如果为市辖区，城市和省名字保持一致
      }
      //这里是请求赋值
      this.params.province = province
      this.params.city = city
      this.params.city = area//三级联动带区可以加上，二级联动(省市)不需要
    },
}
 

编码转文字转换后发送的请求如下图

添加完成清除el-cascader选择还存在上次选择的省市
添加完成之后再次添加发现el-cascader选择还存在上次选择的省市，没有进行清除。
如果按照我上边写的将selectedOptions写在请求体中，清除的话是最简单的，添加完成直接调用element自带的清除方法就可以

this.$refs.params.resetFields()

如果将selectedOptions写在data中，就需要自己再取出赋值才可以进行表单校验，很麻烦，而且校验也会出问题(出现的问题我会在下边下出来)，当然清除selectedOptions方法为
要在el-cascader上加上ref=“cascader”，名字和下图保持一致就可以，添加完成之后调用这个方法清除，但是如果你用了表单校验，第一次添加完成是没问题的，第二次添加，城市也清空了，即使你选择了城市，赋值也都没问题，但是还是校验会失败，很奇怪，所以还是使用将selectedOptions写在请求体中，最后发请求时删除就好啦

  // Cascader级联选择器清除选中
    reset() {
      const _cascader = this.$refs.cascader
      if (_cascader) {
        _cascader.$refs.panel.checkedValue = []
        _cascader.$refs.panel.activePath = []
        _cascader.$refs.panel.syncActivePath() //设置为空可以让节点不高亮显示
      }
    },

省市和省市区回显步骤教程
网上我也查了很多教程，因为向后台传递的为文字，后台返回给我的也是文字， 回显是需要将文字进行编码的

省市回显

// 处理地图数据
          if (this.params.city == this.params.province) {
            this.params.city = '市辖区'
          }
          //  城市文字转编码
          if (this.params.province != '' && this.params.city != '') {
          //这里的selectedOptions 对应着data里的selectedOptions 
            this.params.selectedOptions = [TextToCode[this.params.province].code, TextToCode[this.params.province][this.params.city].code]
          }

省市区回显

// 处理地图数据
          if (this.params.city == this.params.province) {
            this.params.city = '市辖区'
          }
          //  城市文字转编码
          if (this.params.province != '' && this.params.city != '') {
          //这里的selectedOptions 对应着data里的selectedOptions 
            this.params.selectedOptions = [TextToCode[this.params.province].code, TextToCode[this.params.province][this.params.city].code,TextToCode[this.params.province][this.params.city][this.params.area].code]
          }

有什么需要完善的大家可以留言，我会去完善的