URegionSelect 地区选择

• 示例
  • 基本用法
  • 双向绑定
  • Placeholder
  • 隐藏空列表
• API
  • Props/Attrs
  • Events

UI 组件, 表单控件, 块级展示

该组件从 UCascadeSelect 继承，仅填充了中国的行政区数据，其他功能与 UCascadeSelect 相同。

示例

基本用法

<u-linear-layout direction="vertical">
    <u-region-select></u-region-select>
    <u-region-select value="浙江,杭州,滨江区"></u-region-select>
</u-linear-layout>

双向绑定

使用v-model进行双向绑定。

<template>
    <u-region-select v-model="address"></u-region-select>
</template>
<script>
export default {
    data() {
        return {
            address: '',
        };
    },
};
</script>

Placeholder

<u-region-select :categories="[
    { label: '省', placeholder: '请选择省份' },
    { label: '市', placeholder: '请选择城市' },
    { label: '区', placeholder: '请选择县区' },
]"></u-region-select>

隐藏空列表

<u-region-select hide-empty :categories="[
    { label: '省', placeholder: '请选择省份' },
    { label: '市', placeholder: '请选择城市' },
    { label: '区', placeholder: '请选择县区' },
]"></u-region-select>

API

Props/Attrs

| Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | data | Array<{ text, value }> | | '数据' | 数据列表 | | value.sync, v-model | any | | | 当前选择的值 | | categories | Array<{ label, key, placeholder }> | | '数据' | 多级分类 | | hide-empty | boolean | | false | 是否隐藏空列表 | | converter | string, object | | 'join' | value 与 values 的转换器。可选值：'join'表示将 values 数组 join 之后变成 value，'join.number'与join类似，只是会考虑它为数字的情况。也可以用:修改分隔符，类似 Vue 的指令参数，'last-value'表示以最后一项的值作为 value。也可以传入一个包含 { get, set } 的一个对象 | | field | string | | 'value' | 显示文本字段 | | readonly | boolean | | false | 是否只读 | | disabled | boolean | | false | 是否禁用 |

Events

@input

选择某一项时触发

| Param | Type | Description | | ----- | ---- | ----------- | | $event | any | 选择项的值 | | senderVM | URegionSelect | 发送事件实例 |

@select

选择某一项时触发

| Param | Type | Description | | ----- | ---- | ----------- | | $event.level | number | 选择的层级 | | $event.value | any | 改变后的值 | | $event.values | Array | 改变后每项值的数组 | | $event.item | object | 选择项相关对象 | | $event.itemVM | ListViewItem | 选择项子组件 | | senderVM | URegionSelect | 发送事件实例 |

@change

选择值改变时触发

| Param | Type | Description | | ----- | ---- | ----------- | | $event.value | any | 改变后的值 | | $event.oldValue | any | 旧的值 | | $event.values | Array | 改变后每项值的数组 | | $event.oldValues | Array | 旧的每项值的数组 | | senderVM | URegionSelect | 发送事件实例 |