省市区3级联动公用组件，基于elCascader

这个没什么难点，就是找数据挺麻烦。我是直接拿的vant的数据。再通过一系列的js操作转换成了一个树结构的对象。选传一个zAreaObj，因为基于element的样式，所以这个对象里面基本都是他的原生属性。

此组件已上传至npm，可以直接安装使用

npm install ztc-vue

main.js引入

import ztcVue from 'ztc-vue'; //引入邹田聪的组件
import 'ztc-vue/lib/ztc-vue.css'; //引入邹田聪的组件样式
Vue.use(ztcVue);

页面直接使用

<z-area/>

1、组件源码main.vue

<template>
	<el-cascader ref="zArea"
		v-model="zAreaObj.value"
		:options="zAreaObj.options||areaList"
		:props="zAreaObj.props"
		:size="zAreaObj.size"
		:placeholder="zAreaObj.placeholder"
		:disabled="zAreaObj.disabled"
		:clearable="zAreaObj.clearable"
		:show-all-levels="zAreaObj.showAllLevels"
		:collapse-tags="zAreaObj.collapseTags"
		:separator="zAreaObj.separator"
		:filterable="zAreaObj.filterable"
		:filter-method="zAreaObj.filterMethod"
		:debounce="zAreaObj.debounce"
		:before-filter="zAreaObj.beforeFilter"
		:popper-class="zAreaObj.popperClass"
		:expandTrigger="zAreaObj.expandTrigger"
		:multiple="zAreaObj.multiple"
		:lazy="zAreaObj.lazy"
		:lazyLoad="zAreaObj.lazyLoad"
		@change="change"
		@expand-change="expandChange" />
</template>
<script>
	import areaList from './main.json'
	export default {
		name: 'z-area',
		props: {
			zAreaObj: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				areaList,
			}
		},
		methods: {
			change(val) {
				this.$emit('zAreaChange', val, this.$refs.zArea.getCheckedNodes()[0])
			},
			expandChange(val) {
				this.$emit('zAreaExpandChange', val, this.$refs.zArea.getCheckedNodes()[0])
			},
		},
	}
</script>

2、json文件

点击去下载——main.json

3、测试使用

<template>
	<zArea :zAreaObj="zAreaObj" @zAreaChange="zAreaChange"/>
</template>
<script>
	import zArea from '../../../../packages/z-area/src/main.vue'
	export default {
		components: {
			zArea
		},
		data() {
			return {
				zAreaObj:{
					value:['110000','110100','110102']
				}
			}
		},
		methods: {
			zAreaChange(val,zAreaObj){
				console.log(val,zAreaObj)
			}
		},
	}
</script>

4、效果预览