省市区联动组件(对接后端接口，AntDesignVue3、TSX)
接口数据来自于上一篇文章，组件暂时只实现基本功能。有需要的朋友可以自行修改。实际使用接口请求方法记得替换成自己的！！！
一、TS(如果有些没给到，可以直接用any)
/**
* 选择器
*/
interface SelectParams extends BaseFormItemParams {
// 是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。
autoClearSearchValue?: boolean
// 自定义的多选框清空图标
clearIcon?: VNode
// 是否默认高亮第一个选项
defaultActiveFirstOption?: boolean
// 是否默认展开下拉菜单
defaultOpen?: boolean
// 下拉菜单的 className 属性
dropdownClassName?: string
// 下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动
dropdownMatchSelectWidth?: boolean | number
// dropdown 菜单自定义样式
dropdownMenuStyle?: object
// 自定义下拉框内容
dropdownRender?: any
// 下拉菜单的 style 属性
dropdownStyle?: object
// 自定义节点 label、value、options 的字段
fieldNames?: BaseOptions
// 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。
filterOption?: (inputValue: string, option: unknown) => boolean | boolean
// 搜索时对筛选结果项的排序函数, 类似Array.sort里的 compareFunction
filterSort?: (optionA: BaseOptions, optionB: BaseOptions) => number
// 默认高亮的选项
firstActiveValue?: string | string[]
// 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。
getPopupContainer?: (node: Node) => Node
// 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: vNodes, originLabel: any} 的格式,
// originLabel（3.1） 保持原始类型，如果通过 a-select-option children 构造的节点，该值是是个函数（即 a-select-option 的默认插槽）
labelInValue?: boolean
// 设置弹窗滚动高度
listHeight?: number
// 最多显示多少个 tag
maxTagCount?: number
// 最大显示的 tag 文本长度
maxTagTextLength?: number
// 自定义当前选中的条目图标
menuItemSelectedIcon?: VNode
// 设置 Select 的模式为多选或标签
mode?: 'multiple' | 'tags' | 'combobox'
// 当下拉列表为空时显示的内容
notFoundContent?: string
// 是否展开下拉菜单
open?: boolean
// 通过 option 插槽，自定义节点
option?: BaseOptions
// 搜索时过滤对应的 option 属性，不支持 children
optionFilterProp?: string
// 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。
optionLabelProp?: string
// options 数据，如果设置则不需要手动构造 selectOption 节点
options?: Array
// 自定义的多选框清除图标
removeIcon?: VNode
// 控制搜索文本
searchValue?: string
// 是否显示下拉小箭头
showArrow?: boolean
// 使单选模式可搜索
showSearch?: boolean
// 自定义的选择框后缀图标
suffixIcon?: VNode
// 自定义 tag 内容 render，仅在 mode 为 multiple 或 tags 时生效
tagRender?: (props: any) => any
// 在 tags 和 multiple 模式下自动分词的分隔符
tokenSeparators?: string[]
// 设置 false 时关闭虚拟滚动
virtual?: boolean
// 是否禁用
disabled?: boolean
// 提示
placeholder?: string
}
/**
* 表单项通用参数
*/
interface BaseFormItemParams {
// 是否有边框
bordered?: boolean
// 支持清除, 单选模式有效 | 是否允许再次点击后清除
allowClear?: boolean
// 自动获取焦点
autofocus?: boolean
// 输入框大小，large 高度为 40px，small 为 24px，默认是 32px
size?: 'large' | 'middle' | 'small'
} 二、API文档
{
"adcode": "",
"center": "",
"cityCode": "",
"id": "",
"level": "",
"name": "",
"pageNum": 0,
"pageSize": 0,
"parentId": "",
"polyline": ""
}
adcode 区域编码
center 区域中心点
cityCode 城市编码
id 主键id
level country:国家 province:省份（直辖市会在province和city显示） city:市（直辖市会在province和city显示） district:区县 street:街道
name 行政区名称
pageNum 页码
pageSize 页数
parentId 上级id
polyline 行政区边界坐标点三、组件
import { ref, defineComponent, getCurrentInstance, onMounted } from 'vue'
import { SelectParams } from '@/components/base/form-item/props/form-item-params'
import AreaSelect, { UpdateSelect } from './area-select'
import { BasePage } from '@/entity/base-model'
/**
* 省市区联动
*/
export interface AreaProps {
// 接口api
action: Function
// 表单项的参数
params: SelectParams
// 区域类型值
typeValue: AreaTypeValue
}
/**
* 区域参数
*/
export interface AreaTypeValue {
// 第一个选择框的初始化参数 todo 根据接口来选择设置
firstParams?: BasePage
// 父属性名称
parentKey: string
// 子属性名称
childrenKey: string
}
const App = defineComponent({
inheritAttrs: false,
props: {
// 请求方法
action: {
required: true,
type: Function,
},
// 表单项配置参数
params: {
type: Object,
default: () => {},
},
// 数据值（v-model）
value: {
required: true,
type: Array,
validator: (val: Array) => val.length == 3,
},
// 区域参数
typeValue: {
required: true,
type: Object,
default: () => {},
},
},
// 最终返回的数据,数组
emits: ['update:value'],
setup(_props, { slots, emit, expose, attrs }) {
const { action, params, value, typeValue } = _props
onMounted(() => {
refsList.value = getCurrentInstance()?.refs
})
const refsList = ref()
// 全局更新方法
function handlerGlobalUpdate(data: UpdateSelect) {
const { order, option } = data
const { childrenKey, parentKey } = typeValue as AreaTypeValue
// 封装请求参数
let params = {} as any
params[childrenKey] = option[parentKey]
// 切换业务
switch (order) {
case 0:
refsList.value.AreaSelectLevel2.updateData(params)
value[1] = ''
value[2] = ''
refsList.value.AreaSelectLevel2.val = ''
refsList.value.AreaSelectLevel3.val = ''
break
case 1:
refsList.value.AreaSelectLevel3.updateData(params)
refsList.value.AreaSelectLevel3.val = ''
value[2] = ''
break
}
}
return () => (
<>
import { ref, defineComponent, onMounted, unref, watch } from 'vue'
import './style/style.less'
import { AreaTypeValue } from '@/views/test/advanced/tsx/area/area'
import { SelectParams } from '@/components/base/form-item/props/form-item-params'
import { BasePage } from '@/entity/base-model'
/**
* 更新级联参数
*/
export interface UpdateSelect {
value: string
order: number
option: any
}
/**
* 区域选择
*/
const AreaSelect = defineComponent({
props: {
// 请求方法
action: {
required: true,
type: Function,
},
// 表单项配置参数
params: {
type: Object,
default: () => {},
},
// 数据值（v-model）
value: {
required: true,
type: String,
default: '',
},
// 当前选择框顺序
order: {
type: Number,
required: true,
default: 0,
},
// 区域参数
typeValue: {
required: true,
type: Object,
default: () => {},
},
},
// 最终返回的数据,数组
emits: ['update:value', 'globalUpdate'],
setup(_props, { slots, emit, expose }) {
const style = {
width: '120px',
}
const { order, action, params, value, typeValue } = _props
const config = unref(params) as SelectParams
const options = ref([])
let val = ref('')
onMounted(() => {
// 初始情况下，只有第一个会请求
if (order == 0) {
let param = (typeValue as AreaTypeValue)?.firstParams
updateData(param)
}
val.value = value
})
/**
* 更新当前选项的方法
* @param params 参数
*/
const updateData = async (params: BasePage = {}) => {
params.pageNum = 0
params.pageSize = 0
const { data } = await action(params)
options.value = data
}
function handlerChange(value: string, option: unknown) {
val.value = value
// 局部更新
emit('update:value', value)
// 全局更新
emit('globalUpdate', { value, order, option })
}
// todo 暴露更新数据的方法给父组件
expose({ updateData, val })
return () => (
.ant-select{
margin: 5px;
}
.ant-select-selection-item{
margin-top: -4px
}四、使用
{{ value }}