跳到主要内容

地区选择

适用场景#

用于选择各级行政区划(省市区)

基础能力说明#

绑定「地区」字段#

表单容器绑定数据模型后,模型中的「地区」字段会自动渲染为地区选择组件,实现地区信息的选择录入

扩展场景说明#

地区选择组件获取所选地区编码#

实践策略:

通过地区选择组件的 chang 事件出参来获取所选地区信息

配置方法:

  1. 「地区选择」组件:通过组件的 change 事件,可获取到组件当前所选地区的编码

  2. 参数格式

    • event.detail.result[0].code 可获取到省级编码
    • event.detail.result[1].code 可获取到省市编码
    • event.detail.result[2].code 可获取到省市区编码
    • event.detail.value 可获取到数组类型的完整出参
    • 注:为了兼容后续的街道编码,所以目前出参是 12 位格式的编码
  3. 操作示例:配置地区选择组件-change(值改变)事件下,触发弹窗动作,弹窗内容填写表达式:event.detail.result[0].code,即可以弹窗形式展示所选地区的省级编码 事件配置方法如下 运行态效果如下

属性介绍#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
字段绑定namestring基础属性"formMutiRegion"表单字段的Key值,用于提交数据时,匹配数据模型字段标识。页面内需保证唯一。
字段标题labelstring基础属性"地区"组件标题位置的显示内容
显示标题labelVisibleboolean基础属性true显示组件的标题
选中地区valuestring基础属性""省市区的默认值
地域类型regionType{"label":"省-市-区","value":"levelThree"}|{"label":"省-市","value":"levelTwo"}|{"label":"省","value":"levelOne"}基础属性"levelThree"-
必填requiredboolean基础属性false启用后该组件强制必填,值不可为空
必填标识requiredFlagboolean基础属性true启用后,组件若要求必填,则会显示必填星号标记
必填校验提示requiredMsgstring基础属性"该项为必填项"启用必填,但组件值为空时的提示信息
占位符placeholderstring高级属性"请选择"-
是否禁用disabledboolean高级属性false是否禁用输入/选择,启用后组件强制显示为只读效果
组件宽度(PC端)size{"label":"大","value":"l"}|{"label":"中","value":"m"}|{"label":"小","value":"s"}|{"label":"占满","value":"full"}高级属性"m"-
布局方式layout{"label":"自动","value":""}|{"label":"水平","value":"horizontal"}|{"label":"垂直","value":"vertical"}高级属性""设置当前组件的标题和输入选择区域为左右布局或上下布局,如选择“自动”,则跟随父级表单容器的配置

事件介绍#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
值改变change兼容三端-
取消cancel兼容三端-