# tui-picker 联动选择

介绍

联动选择,可自行调整联动级数,示例为三级联动。

完整的全国省市区数据下载 city-data (opens new window)

# picker组件联动

picker 组件的具体使用请参考 官方文档 (opens new window)

设置mode = multiSelector,多列选择器。

change 事件:value 改变时触发 change 事件,event.detail = {value: value}

columnchange 事件:某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标

<!--uni-app-->
<picker :value="value" mode="multiSelector" @change="picker" @columnchange="columnPicker" :range="multiArray">
	<tui-button  shape="circle">请选择</tui-button>
</picker>

<!--微信小程序-->
<picker value="{{value}}" mode="multiSelector" bindchange="picker" bindcolumnchange="columnPicker" range="{{multiArray}}">
	<tui-button  shape="circle">请选择</tui-button>
</picker>

约定好数据格式,联动逻辑实现主要根据事件触发进行相关数据处理,具体实现参考示例程序。

# picker-view组件联动

picker-view 组件的具体使用请参考 官方文档 (opens new window)

change 事件:当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)

<!--uni-app-->
<picker-view indicator-style="height: 50px;" class="picker-view" :value="value" @change="columnPicker">
	<picker-view-column>
		<view v-for="(item,index) in proviceArr" :key="index" class="item">{{item}}</view>
	</picker-view-column>
	<picker-view-column>
		<view v-for="(item,index) in cityArr" :key="index" class="item">{{item}}</view>
	</picker-view-column>
	<picker-view-column>
		<view v-for="(item,index) in districtArr" :key="index" class="item">{{item}}</view>
	</picker-view-column>
</picker-view>

<!--微信小程序-->
<picker-view indicator-style="height: 50px;" class="picker-view" value="{{value}}" bindchange="columnPicker">
	<picker-view-column>
		<view wx:for="{{proviceArr}}" wx:key="index" class="item">{{item}}</view>
	</picker-view-column>
	<picker-view-column>
		<view wx:for="{{cityArr}}" wx:key="index" class="item">{{item}}</view>
	</picker-view-column>
	<picker-view-column>
		<view wx:for="{{districtArr}}" wx:key="index" class="item">{{item}}</view>
	</picker-view-column>
</picker-view>

约定好数据格式,联动逻辑实现主要根据事件触发进行相关数据处理,具体实现参考示例程序。

# 预览

完整的全国省市区数据下载 city-data (opens new window)

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码