级联选择

Cascade Selection:支持一次性传入所有数据,支持分级请求返回数据,支持N级,直至没有下一级数据。

组件结构

<template>
	<view class="tui-cascade-selection">
		<scroll-view
			scroll-x
			scroll-with-animation
			:scroll-into-view="scrollViewId"
			:style="{ backgroundColor: headerBgColor }"
			class="tui-bottom-line"
			:class="{ 'tui-btm-none': !headerLine }"
		>
			<view class="tui-selection-header" :style="{ height: tabsHeight, backgroundColor: backgroundColor }">
				<view
					class="tui-header-item"
					:class="{ 'tui-font-bold': index === currentTab && bold }"
					:style="{ color: index === currentTab ? activeColor : color, fontSize: size + 'rpx' }"
					:id="`id_${index}`"
					@tap.stop="swichNav"
					:data-current="index"
					v-for="(item, index) in selectedArr"
					:key="index"
				>
					{{ item.text }}
					<view class="tui-active-line" :style="{ backgroundColor: lineColor }" v-if="index === currentTab && showLine"></view>
				</view>
			</view>
		</scroll-view>
		<swiper class="tui-selection-list" :current="currentTab" duration="300" @change="switchTab" :style="{ height: height, backgroundColor: backgroundColor }">
			<swiper-item v-for="(item, index) in selectedArr" :key="index">
				<scroll-view scroll-y :scroll-into-view="item.scrollViewId" class="tui-selection-item" :style="{ height: height }">
					<view class="tui-first-item" :style="{ height: firstItemTop }"></view>
					<view
						class="tui-selection-cell"
						:style="{ padding: padding, backgroundColor: backgroundColor }"
						:id="`id_${subIndex}`"
						v-for="(subItem, subIndex) in item.list"
						:key="subIndex"
						@tap="change(index, subIndex, subItem)"
					>
						<icon type="success_no_circle" v-if="item.index === subIndex" :color="checkMarkColor" :size="checkMarkSize" class="tui-icon-success"></icon>
						<image :src="subItem.src" v-if="subItem.src" class="tui-cell-img" :style="{ width: imgWidth, height: imgHeight, borderRadius: radius }"></image>
						<view
							class="tui-cell-title"
							:class="{ 'tui-font-bold': item.index === subIndex && textBold, 'tui-flex-shrink': nowrap }"
							:style="{ color: item.index === subIndex ? textActiveColor : textColor, fontSize: textSize + 'rpx' }"
						>
							{{ subItem.text }}
						</view>
						<view class="tui-cell-sub_title" :style="{ color: subTextColor, fontSize: subTextSize + 'rpx' }" v-if="subItem.subText">{{ subItem.subText }}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiCascadeSelection',
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
itemList Array 如果下一级是请求返回,则为第一级数据,否则所有数据 []
headerLine Boolean 是否显示header底部细线 true
headerBgColor String header背景颜色 #FFFFFF
tabsHeight String 顶部标签栏高度 88rpx
text String 默认显示文字 请选择
size Number tabs 文字大小 28
color String tabs 文字颜色 #555
activeColor String 选中颜色 #5677fc
bold Boolean 选中后文字加粗 true
showLine Boolean 选中后是否显示底部线条 true
lineColor String 线条颜色 #5677fc
checkMarkSize Number icon 大小 15
checkMarkColor String icon 颜色 #5677fc
imgWidth String item 图片宽度 40rpx
imgHeight String item 图片高度 40rpx
radius String 图片圆角 50%
textColor String item text颜色 #333
textActiveColor String item text选中后颜色 #333
textBold Boolean 选中后字体是否加粗 true
textSize Number item text字体大小 28
nowrap Boolean text 是否不换行 false
subTextColor String item subText颜色 #999
subTextSize Number item subText字体大小 24
padding String item padding 20rpx 30rpx
firstItemTop String 占位高度,第一条数据距离顶部距离 20rpx
height String swiper 高度 300px
backgroundColor String item swiper 内容部分背景颜色 #FFFFFF
request Boolean 子集数据是否请求返回(默认false,一次性返回所有数据) false
receiveData Array 子级数据(当有改变时,默认当前选中项新增子级数据,request=true时生效) []
reset [Number, String] 改变值则重置数据 0

methods

名称 描述
@change layer中item项点击回传事件
@complete 完成选择回传数据

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/selection/selection

H5二维码

小程序二维码