vue-plugin

Appearance

目录

city 城市选择组件 ​

注意

city 组件基于 element-ui 的 cascader 的组件二次封装，继承大部分的属性配置，props 属性请使用 defaultProps。

city 组件内部自带了一份城市 json 数据，大部分情况下使用默认数据即可，如果数据不满足，通过 data 属性传入新数据即可。

默认情况下，如果绑定的是空字符串，得到的值为最后一级的 code，如果绑定的是数组，得到的值为省市区 code 组成的数组，当组件设置 multiple 为 true 时，且绑定值为数组时，得到的值为当前选择的 code 和父级 code 组成的二维数组

用法 ​

vue
<template>
	<ws-city v-model="code"></ws-city>

	<div>当前选中的是：{{ code }}</div>
</template>

<script>
export default {
	data() {
		return {
			code: '',
		}
	},
}
</script>

绑定数组 ​

vue
<template>
	<ws-city v-model="code"></ws-city>

	<div>当前选中的是：{{ code }}</div>
</template>

<script>
export default {
	data() {
		return {
			code: [],
		}
	},
}
</script>

选择任意一级选项 ​

vue
<template>
	<ws-city v-model="code" :defaultProps="{ checkStrictly: true }"></ws-city>

	<div>当前选中的是：{{ code }}</div>
</template>

<script>
export default {
	data() {
		return {
			code: [],
		}
	},
}
</script>

多选 ​

vue
<template>
	<ws-city v-model="code" :defaultProps="{ multiple: true }"></ws-city>

	<div>当前选中的是：{{ code }}</div>
</template>

<script>
export default {
	data() {
		return {
			code: [],
		}
	},
}
</script>

属性 ​

参数说明类型默认值
value / v-model绑定值String/Number/Array-
data数据源，不传则取组件内部数据Array[]
level显示级别，1 省，2 省市，3 省市区String3
showAll是否显示区县中的全部选项Booleanfalse
showCountry是否展示全国Booleanfalse
disableSelection是否禁用复选框Booleanfalse
defaultProps参考 el-cascader 的 props 配置项Object-

事件 ​

事件名说明
change获取选中项，（选中 code，选中对象）

方法 ​

方法名说明
getData获取默认省市区数据