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示例小程序码