Tui Plus Vapor

Appearance

t-cascader ​

Cascader 级联选择器

组件介绍 ​

t-cascader 是一个级联选择器组件，支持多级菜单的灵活选择，支持动态数据加载和禁用选项。组件采用简洁的界面设计，提供了直观的级联选择体验，适用于地区选择、分类选择等需要多级联动的场景。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/cascader/cascader.uvue，通过 option 属性设置选项数据，使用 v-model 绑定选中值。

vue
<template>
  <t-cascader v-model="selectedValue" :option="options" class="mb-30"></t-cascader>
  <t-text>选中值: {{ selectedValue }}</t-text>
</template>

<script setup>
const selectedValue = ref([]);
const options = ref([
  {
    value: '1',
    label: '北京市',
    children: [
      {
        value: '11',
        label: '朝阳区',
        children: [
          { value: '111', label: '三里屯' },
          { value: '112', label: '望京' },
          { value: '113', label: 'CBD' }
        ]
      },
      {
        value: '12',
        label: '海淀区',
        children: [
          { value: '121', label: '中关村' },
          { value: '122', label: '上地' },
          { value: '123', label: '清华园' }
        ]
      }
    ]
  },
  {
    value: '2',
    label: '上海市',
    children: [
      {
        value: '21',
        label: '浦东新区',
        children: [
          { value: '211', label: '陆家嘴' },
          { value: '212', label: '张江' },
          { value: '213', label: '迪士尼' }
        ]
      },
      {
        value: '22',
        label: '静安区',
        children: [
          { value: '221', label: '南京西路' },
          { value: '222', label: '静安寺' },
          { value: '223', label: '曹家渡' }
        ]
      }
    ]
  }
]);
</script>

Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleanfalse
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring''
size组件尺寸，可选 large、medium、small、ministring'medium'
modelValue绑定的选中值string[][]
option选项数据，用于配置级联选择的数据源UTSJSONObject[][]
scrollClass滚动容器的额外类名，用于自定义滚动容器的样式string''

Events ​

事件名说明回调参数
change值变化时触发string[]
update:modelValue绑定值变化时触发string[]
click点击时触发UniPointerEvent
initFinished组件初始化完成时触发，返回组件节点信息NodeInfo
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-
transitionend动画结束时触发-