博客

element中el-cascader组件实现-中国省市区三级联动插件，使用如下：

（这里主要将讲element-china-area-data组件，完整的和地图联动见下篇文章）

本人发现，有大佬写的更完善，比较完整的省市区使用见下面这个地址：

https://blog.csdn.net/xiejnpeng/article/details/111400199?spm=1001.2014.3001.5501

1.安装插件

npm install element-china-area-data -S

2.页面使用：

 <el-form-item label="店铺地址" prop="shopAdressProvince">
	<el-cascader
	    :options="options"
	    v-model="selectedOptions"
	    @change="addressChange"
	    clearable   
	    class="PVC" size="large"
	  >
	 </el-cascader>
</el-form-item>

3.data-return中定义

<script>
import { regionData, CodeToText,TextToCode } from 'element-china-area-data'//regionData省市区数组，CodeToText ：省市区code码转文字方法
data () {
    return {
    	options: regionData,//使用中国省市区数组
    	selectedOptions: [],//店铺地址数组
    	personalForm: {//表单
	    	lng: "", //经度 && 维度
	        lat: "", 
	        shopAdressProvince:"", //省市区名称
	        shopAdressCity:"",
	        adname: "", 
	        prcode: "", //省市区code码
	        citycode: "", 
	        adcode:"",
		}
	}
}

methods: {
  //选择省市区时-将取到的省市区名称、编码赋值给要传给后台的表单
  addressChange(arr) {//change事件
    this.personalForm.shopAdress = `${CodeToText[arr[0]]}-${ CodeToText[arr[1]] }-${CodeToText[arr[2]]}`;//根据后台接参，这里传的是河北省-石家庄市-桥西区形式。下面是分开传的省市区文字和编码。
    this.personalForm.shopAdressProvince = CodeToText[arr[0]];//省市区名称
    this.personalForm.shopAdressCity = CodeToText[arr[1]];
    this.personalForm.adname = CodeToText[arr[2]];
    this.personalForm.prcode= arr[0]//省市区编码
    this.personalForm.citycode= arr[1]
    this.personalForm.adcode = arr[2]
    // 城市提交给地图
    this.MapCityName = [CodeToText[arr[0]], CodeToText[arr[1]] , CodeToText[arr[2]] ];
   },
   //详情回显-省市区（错误示例）
   this.selectedOptions.push( [res.data.prcode][0],[res.data.citycode][0],[res.data.adcode][0])//里面选择回显
   document.querySelector('.PVC input').value = res.data.shopAdressProvince +'/'+ res.data.shopAdressCity +'/'+ res.data.adname//输入框回显
    //详情回显-省市区（正确示例），由于刚开始用push，导致输入框详情不能回显省市区；后改成下面直接赋值即可
   this.selectedOptions = [ res.data.prcode,res.data.citycode,res.data.adcode ]//省市区回显,不要push
   //2.TextToCode的使用
	//如果后台只返回了名称，无返回编码，用TextToCode即可：
	//let prcode = TextToCode[res.data.shopAdressProvince].code
	//let citycode = TextToCode[res.data.shopAdressProvince][res.data.data.shopAdressCity].code
	//let adcode = TextToCode[res.data.shopAdressProvince][res.data.shopAdressCity][res.data.adname].code
	//this.selectedOptions = [ prcode,citycode,adcode ]//省市区回显,不要push,输入、里面级联可直接回显
}

</script>