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]
          }

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值