**JAreaSelect省市县三级联动组件** [TOC] ## 参数定义 | 参数名 | 类型 | 默认值 | 必填 | 说明 | |----------------|--------|----------|------|-----------------------------------| | value(v-modal) | String | | 是 | 绑定值 | | province| String | | 是 | 绑定省份 | | city| String | | 是 | 绑定城市 | | area| String | | 是 | 绑定地区 | | level | number | | 3 | 省市区级联层级 | ## 使用示例 - 返回单值 ![](https://img.kancloud.cn/57/02/57027f3c2606979932fc39cf6dbe8cf5_803x63.png) ~~~ <template> <a-form style="height:800px"> <a-row class="form-row" :gutter="16"> <a-col :lg="8"> <a-form-item label="省市区级联单选" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <JAreaSelect v-model:value="pop"/> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item label="省市区级联单选数值" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <span>{{pop}}</span> </a-form-item> </a-col> </a-row> </a-form> </template> <script lang="ts" setup> import {ref,reactive} from 'vue' import {JAreaSelect} from '/@/components/Form'; const pop = ref('') </script> ~~~ - 返回多值 ![](https://img.kancloud.cn/9c/cb/9ccb21d7eee7fe8c3b26d8452e89df75_973x65.png) ~~~ <template> <a-form style="height:800px"> <a-row class="form-row" :gutter="16"> <a-col :lg="8"> <a-form-item label="省市区级联多选" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <JAreaSelect v-model:province="pca.province" v-model:city="pca.city" v-model:area="pca.area"/> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item label="省市区级联多选数值" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <span>{{pca}}</span> </a-form-item> </a-col> </a-row> </a-form> </template> <script lang="ts" setup> import {ref,reactive} from 'vue' import {JAreaSelect} from '/@/components/Form'; const pca = reactive({ province:'', city:'', area:'' }) </script> ~~~