# t-cascader

Cascader 级联选择器

t-cascader 组件介绍

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

t-cascader 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-cascader 基础用法

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

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mltr-15'
				title="Cascader 级联选择器"
				sub-title='级联选择器组件，多级菜单灵活选择,支持动态数据加载/支持禁用选项(内容区可滚动需要设置 scroll的高度,不设置高度会自适应)'></t-card>
		<introduction title='基础功能'>
			<t-cascader v-model="value1"
						type="success"
						:option="list"></t-cascader>
			<t-button type="primary"
					  @click="value1=['zhinan', 'shejiyuanze', 'xiaolv']">双向绑定测试</t-button>
		</introduction>
		<introduction title='默认值'>
			<t-cascader v-model="value"
						type="primary"
						:option="list"></t-cascader>
		</introduction>
	</view>
</template>

<script setup>
	// 这里需要定义value1、value和list等变量
	// 由于原代码没有提供这部分，这里只是示例
	import { ref } from 'vue'

	const value1 = ref<string[]>(['zhinan', 'shejiyuanze', 'xiaolv'])
	const value = ref<string[]>([])

	// 假设list是一个级联选择器的选项数据
	const list = ref<UTSJSONObject[]>([
		{
			value: 'zhinan',
			label: '指南',
			children: [
				{
					value: 'shejiyuanze',
					label: '设计原则',
					children: [
						{
							value: 'yizhi',
							label: '一致'
						},
						{
							disabled: true,
							value: 'fankui',
							label: '反馈'
						},
						{
							value: 'xiaolv',
							label: '效率'
						},
						{
							value: 'kekong',
							label: '可控'
						}
					]
				},
				{
					value: 'daohang',
					label: '导航',
					children: [
						{
							value: 'cexiangdaohang',
							label: '侧向导航'
						},
						{
							value: 'dingbudaohang',
							label: '顶部导航'
						}
					]
				}
			]
		}
	])
</script>

t-cascader Props

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

t-cascader Events

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