使用 vxe-tree-select 实现省市区级联下拉选择

在后台管理系统中，省市区选择是一个常见需求。vxe-tree-select 组件结合树形数据，可以优雅地实现三级联动的下拉选择效果。本文将介绍如何基于该组件快速实现省市区选择，并支持搜索、清空、仅选择末级节点等实用功能。

效果

• 下拉框中展示完整的省/市/区树形结构
• 选中后输入框显示完整路径（如「广东省/深圳市/南山区」）
• 仅允许选择区县级（末级）节点
• 支持过滤搜索、清空选项

代码

通过设置 show-full-label 显示为哦完整路径的内容

<template>
  <div>
    <vxe-tree-select
      v-model="val1"
      :options="treeList"
      :treeConfig="treeConfig"
      :option-props="{ value: 'id', label: 'name' }"
      show-full-label
      filterable
      clearable
    ></vxe-tree-select>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import XEUtils from 'xe-utils'

const val1 = ref()
const treeList = ref([])

const treeConfig = reactive({
  trigger: 'node',
  radioConfig: {
    checkMethod({ node }) {
      return !node.children || !node.children.length
    }
  }
})

const loadList = () => {
  fetch('https://vxeui.com/resource/json/provinces_list.json')
    .then((res) => res.json())
    .then((data) => {
      treeList.value = XEUtils.toArrayTree(data, { key: 'id', parentKey: 'parentId' })
    })
}

loadList()
</script>

说明

属性 / 配置项	说明
show-full-label	选中后输入框显示节点的完整路径（例如「广东/深圳/南山」）
filterable	支持在下拉框中按名称过滤树节点
clearable	显示清空按钮，可一键取消选中
option-props	映射数据字段：id 作为选项值，name 作为显示文本
treeConfig.radioConfig.checkMethod	控制哪些节点可以被选中：只有没有 children 的叶子节点（即区县级）才可选。这避免了误选省或市。

性能优化：若省市区数据量较大（如含街道级），建议开启虚拟滚动：virtual-scrol

https://vxeui.com