# tui-cascade-selection 级联选择

介绍

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

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiCascadeSelection from "@/components/thorui/tui-cascade-selection/tui-cascade-selection.vue"
export default {
	components:{
		tuiCascadeSelection
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	√	√	√	√	√	√	√

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-cascade-selection": "/components/thorui/tui-cascade-selection/tui-cascade-selecti"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

一次性传入所有数据

通过 itemList 属性传入所有数据。

<!--uni-app-->
<tui-cascade-selection height="200px" :itemList="itemList" @complete="complete"></tui-cascade-selection>

<!--微信小程序-->
<tui-cascade-selection height="200px" itemList="{{itemList}}" bindcomplete="complete"></tui-cascade-selection>

请求返回子级数据

通过 request 属性控制子集数据是否为请求返回。请求返回子级数据时 itemList 属性传入第一级数据。通过 receiveData 属性传入请求返回的子级数据。

change 为选择器item项中点击回传事件，用于请求下一级数据时使用。

<!--uni-app-->
<tui-cascade-selection request height="200px" :itemList="itemList" :receiveData="receiveData" @complete="complete" @change="change"></tui-cascade-selection>

<!--微信小程序-->
<tui-cascade-selection request height="200px" itemList="{{itemList}}" receiveData="{{receiveData}}" bindcomplete="complete" bindchange="change"></tui-cascade-selection>

# Slots

none

# Props

参数	类型	说明	默认值
itemList	Array	级联数据，如果下一级是请求返回，则为第一级数据，否则为所有数据	[ ]
defaultItemList	Array	初始化默认选中数据，当一次性传入所有数据时，默认值可为字符串数组，如：['安徽省','阜阳市','颍上县']	[ ]
defaultKey V1.7.2+	String	默认值字段key，可传值：text，value，仅当一次性传入所有数据时有效	text
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]	改变reset值则重置所有数据	0

itemList 属性Object参数说明

属性 receiveData 数据格式与 itemList中子集数据一致，数据为约定格式，尽量保持一致。

[{
    src: "", //图标地址
    text: "",//主文本
    subText: "",//副文本
    value: 0, //value值 
    children:[{
  	  text: "",//主文本
  	  subText: "",//副文本
  	  value: 0,//value值
  	  children:[] //子级数据 如果数据长度为0则表示没有下一级数据了
     }] //子级数据
}]

defaultItemList 属性Object参数说明

数据为约定格式，尽量保持一致，当一次性传入所有数据时，默认值可为字符串数组。

[{
  	text: "", //选中的text
  	subText: '', //选中的subText
  	value: '', //选中的value
  	src: '', //选中的src，没有则传空或不传
  	index: 0, //选中数据在当前layer索引
  	list: [{
  		src: "",//图标地址
  		text: "", //主文本
  		subText: "",//副文本
  		value: 101 //value值 
  	 }] //当前layer下所有数据集合
}]