# 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下所有数据集合
}]
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 选择器中item项点击时触发 | 当前层级数据以及点击项的索引值 |
complete | 完成选择时触发 | 选择结果数据 |
change事件回调参数说明
查看具体据结构可操作示例(请求返回子级),切换至控制台查看console打印信息。
layer
当前所属层级
subIndex
当前层级点击项索引值
subItem项
当前层级点击项所有数据,由父组件传入的数据
complete事件回调参数说明
查看具体据结构可操作示例,切换至控制台查看console打印信息。
result
当前选择的结果
text
所有层级选择的text值拼接数据,如:安徽省合肥市庐阳区
value
最后一级点击项的value值
subText
最后一级点击项的text值
src
最后一级点击项的src值
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |