TabbedCascader 多 Tab 级联

多数据源 Tab + 面包屑钻取 + 面板内搜索；点击叶子即选中。 支持 string[] 扁平数据与 Tab 级 creatable 自定义输入（如金额）。 v-model 仍为 { tab, path, labels }。

基础用法

归属角色 / 金额（string[] + creatable）/ 同事树：用 fieldNames 按 tab 映射；金额 Tab 可点预设或底部输入数字确认。

选择字段

请选择

<script setup lang="ts">
import { ref } from 'vue'
import {
  RdTabbedCascader,
  encodeTabbedCascaderValue,
  type TabbedCascaderValue,
} from '@rd-element/ui'

const value = ref<TabbedCascaderValue | null>(null)

const options = [
  {
    label: '归属角色',
    value: 'role',
    data: [
      {
        label: '客户',
        value: 'customer',
        children: [
          { label: '跟进人', value: 'follower' },
          { label: 'CS', value: 'cs' },
        ],
      },
    ],
  },
  {
    label: '金额',
    value: 'amount',
    creatable: { prefix: '超', append: '美金' },
    data: ['超3,000美金', '超5,000美金', '超10,000美金'],
  },
  {
    label: '同事',
    value: 'colleague',
    data: [/* 组织树：name / type_id / children */],
  },
]

const fieldNames = {
  role: { label: 'label', value: 'value', children: 'children' },
  colleague: { label: 'name', value: 'type_id', children: 'children' },
}
</script>

<template>
  <RdTabbedCascader
    v-model="value"
    :options="options"
    :field-names="fieldNames"
  />
  <p v-if="value">
    编码：{{ encodeTabbedCascaderValue(value) }}
  </p>
</template>

API

Attributes

属性名	说明	类型	默认值
v-model	选中值；null 表示未选	TabbedCascaderValue | null	null
options	Tab 列表；每项含 label / value / data。data 可为树或 string[] 扁平叶子；creatable 开启底部自定义输入	TabbedCascaderTab[]	—
options[].creatable	该 Tab 底部自定义输入；true 或 { prefix, append, placeholder }。确认后 v-model 为单段 path/labels	boolean | TabbedCascaderCreatableOptions	—
fieldNames	字段映射；可为全局一份，或按 tab.value 分别配置	TabbedCascaderFieldNames | Record<string, TabbedCascaderFieldNames>	{ label: 'label', value: 'value', children: 'children' }
placeholder	未选占位	string	'请选择'
rootLabel	面包屑根文案	string	'全部'
searchPlaceholder	面板内搜索占位	string	'搜索'
emptyText	搜索无结果文案	string	'未找到匹配项…'
clearable	是否可清空	boolean	true
disabled	禁用	boolean	false

Events

事件名	说明	类型
update:modelValue	选中或清空	(value: TabbedCascaderValue | null) => void
change	同 update:modelValue（叶子选中或清空时）	(value: TabbedCascaderValue | null) => void
clear	点击清空	() => void

Slots

插槽名	说明
append	覆盖 creatable 输入框后缀展示（默认用 creatable.append）

TabbedCascaderValue

interface TabbedCascaderValue {
  tab: string
  path: string[]
  labels: string[]
}

展示文案为 labels.join(' / ')。扁平 / 自定义金额时 path 与 labels 各一项。工具函数：encodeTabbedCascaderValue(value) → `${tab}-${path.join('.')}`。

TabbedCascaderTab.creatable

creatable?: boolean | {
  prefix?: string      // 如「超」，拼进最终文案
  append?: string      // 如「美金」；可用 #append 覆盖展示
  placeholder?: string
}

输入数字（可含千分位）后回车或点确定 → `${prefix}${formatted}${append}`，例如 超5,000美金。