uniapp picker 多列选择器用法

羽筠

已于 2024-04-24 14:41:50 修改

阅读量6.3k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：小程序 JS 微信项目文章标签： uni-app

于 2024-04-17 11:07:50 首次发布

本文链接：https://blog.csdn.net/qq_16494241/article/details/137864439

uniapp picker 多列选择器联动筛选器交互处理方法，
uniapp 多列选择器 mode="multiSelector" 数据及筛选联动交互处理，
通过接口获取数据，根据用户选择当前列选项设置子列数据，实现三级联动效果，
本示例中处理了三级无数据时则从数据中删除，处理三级后二级无数据时则亦从数据中删除，删除的数据最终不展示在筛选器中。

html

<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="communityListArray" range-key="label">
	<view class="picker">
		{
  
  {communityListArray[0][multiIndex[0]].label ? communityListArray[0][multiIndex[0]].label + '，' : ''}}
		{
  
  {communityListArray[1][multiIndex[1]].label ? communityListArray[1][multiIndex[1]].label + '，' : ''}}
		{
  
  {communityListArray[2][multiIndex[2]].label ? communityListArray[2][multiIndex[2]].label : '请选择所属社群'}}
	</view>
</picker>

data设置参数数据