RegionTreeSelect 行政区划树选择

基于 Naive UI TreeSelect 的行政区划选择组件，一次性加载指定根区划下的完整区划树（含虚拟组织节点），支持数据权限控制和搜索过滤。

• 基础用法
• Props
• Events
• 在 AiCrudPage 中使用
• 注意事项

基础用法

<template>
  <RegionTreeSelect v-model="regionCode" />
</template>

<script setup>
import { ref } from 'vue'
import RegionTreeSelect from '@/components/RegionTreeSelect.vue'

const regionCode = ref('')
</script>

Props

属性	类型	默认值	说明
modelValue	String | Number	—	v-model 绑定值，选中的区划编码
rootCode	String	''	根区划编码，限定加载范围
dataRight	Boolean	true	是否启用数据权限控制（过滤用户无权访问的区划）
placeholder	String	'请选择行政区划'	占位提示文本
clearable	Boolean	true	是否可清空
filterable	Boolean	true	是否可搜索筛选
disabled	Boolean	false	是否禁用
size	String	'medium'	组件尺寸：'small' | 'medium' | 'large'
virtualDisabled	Boolean	true	虚拟组织节点是否不可选。编辑场景设 true，筛选场景设 false

Events

事件名	参数	说明
update:modelValue	(value)	v-model 值变化
change	(value)	选中值变化，携带新区划编码

在 AiCrudPage 中使用

在 searchSchema 或 editSchema 中使用：

// 编辑表单
const editSchema = [
  { field: 'regionCode', label: '所属区域', type: 'regionTreeSelect',
    rules: [{ required: true, message: '请选择所属区域' }] },
]

// 搜索筛选（虚拟节点可选）
const searchSchema = [
  { field: 'regionCode', label: '区域', type: 'regionTreeSelect',
    props: { virtualDisabled: false } },
]

注意事项

• 数据来自 /system/region/tree 接口，自动构建树形结构
• virtualDisabled=true（默认）时虚拟组织节点不可选中，适用于编辑场景防止数据错误
• virtualDisabled=false 时虚拟节点可选，适用于搜索筛选场景
• dataRight=true 时会根据当前用户权限过滤区划数据