引入组件

局部引入

// parent.vue
const FCascadeSelection = defineAsyncComponent(
  () => import('@/components/formaui/f-cascade-selection/f-cascade-selection.vue')
)

基础用法

items属性：级联数据

<f-cascade-selection :items="items" @change="onChange" @complete="onComplete" />

import { ref } from 'vue'

const items = ref([
  {
    text: '浙江',
    value: '330000',
    children: [
      {
        text: '杭州',
        value: '330100',
        children: [
          { text: '西湖区', value: '330106' },
          { text: '余杭区', value: '330110' }
        ]
      }
    ]
  }
])

const onChange = (detail: { layer: number; text?: string }) => {
  console.log(detail.layer, detail.text)
}

const onComplete = (detail: { text: string; value: string | number }) => {
  console.log(detail.text, detail.value)
}

defaultItems属性：默认选中

传入文本数组时按 defaultKey 匹配；也可传入完整选中层级对象。

<f-cascade-selection :items="items" :default-items="['浙江', '杭州', '西湖区']" />

isRequest属性：异步加载子级（默认false）

第一级使用 items，后续级别通过 receiveData 传入请求结果。

<f-cascade-selection :items="items" is-request :receive-data="receiveData" @change="onRequestChange" />

const receiveData = ref([])

const onRequestChange = (detail: { layer: number; value?: string | number }) => {
  // 根据 layer / value 请求并赋值 receiveData
}

resetKey属性：改变时重置组件

<f-cascade-selection :items="items" :reset-key="resetKey" />

插槽

名称	说明
-	-

属性

名称	类型	说明	默认值
items	FCascadeSelectionItem[]	级联数据	[]
defaultItems	FCascadeSelectionSelectedItem[] | (string | number)[]	默认选中	[]
defaultKey	string	默认选中匹配字段	text
showHeaderLine	boolean	显示 header 底部分割线	true
headerBgColor	string	header 背景色	#FFFFFF
tabHeight	string	顶部标签栏高度	88rpx
placeholderText	string	未选择占位文字	请选择
fontSize	string	标签文字大小	28rpx
textColor	string	标签文字颜色	#555555
activeColor	string	选中标签颜色	主题色
isTabBold	boolean	选中标签加粗	true
showTabLine	boolean	显示选中标签底线	true
tabLineColor	string	标签底线颜色	主题色
checkIconSize	number	勾选图标大小（rpx）	28
checkColor	string	勾选图标颜色	主题色
imageWidth	string	列表项图片宽度	40rpx
imageHeight	string	列表项图片高度	40rpx
imageRadius	string	图片圆角	50%
itemTextColor	string	列表项文字颜色	#0B1D4A
itemActiveTextColor	string	列表项选中文字颜色	#0B1D4A
isItemTextBold	boolean	列表项选中加粗	true
itemFontSize	string	列表项文字大小	28rpx
isNowrap	boolean	列表项文字不换行	false
subTextColor	string	副标题颜色	#999999
subTextFontSize	string	副标题大小	24rpx
padding	string	列表项内边距	20rpx 30rpx
firstItemTop	string	首项顶部占位	20rpx
height	string	内容区高度	300px
bgColor	string	内容背景色	#FFFFFF
isRequest	boolean	子级异步请求	false
receiveData	FCascadeSelectionItem[]	异步返回子级数据	[]
resetKey	number | string	改变时重置	0

FCascadeSelectionItem

名称	类型	说明
text	string	选项文本
subText	string	副标题
value	string | number	选项值
src	string	图片地址
children	FCascadeSelectionItem[]	子级数据

事件

事件名	说明	回调参数
change	选中某一级	{ layer, subIndex, text, value, ... }
complete	完成全部选择	{ result, value, text, subText, src }

方法

方法名	说明	传入参数
-	-	-