uniapp picker 多列选择器用法

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设置参数数据

data() {
	return {
		communityListArray : [],
		multiIndex : [],
	}
}

created 或 onLoad 中，调用请求接口获取筛选项数据方法

this.communityListDataSet();

接口获取筛选项数据，如 res.data：

[
	{
		id: 3,
		label: "天津",
		parent_id: 0,
		children: [
			{
				id: 51035,
				label: "东丽区",
				parent_id: 3,
				cityCommunity: [
					// 无社群数据
				],
			},
		],
	},
	{
		id: 1,
		label: "北京",
		parent_id: 0,
		children: [
			{
				id: 72,
				label: "朝阳区1",
				parent_id: 1,
				cityCommunity: [
					{area_id: 72, id: 13, label: "朝阳区1-社群名称",}
				],
			},
			{
				id: 73,
				label: "朝阳区2",
				parent_id: 1,
				cityCommunity: [
					// 无社群数据
				],
			}
		],
	},
	{
		id: 2,
		label: "上海",
		parent_id: 0,
		children: [
			{
				id: 78,
				label: "黄浦区",
				parent_id: 2,
				cityCommunity: [
					{area_id: 78, id: 16, label: "黄浦区-社群名称",}
				],
			},
			{
				id: 2813,
				label: "徐汇区",
				parent_id: 2,
				cityCommunity: [
					{area_id: 2813, id: 17, label: "徐汇区-社群名称",}
				],
			}
		],
	},
	{
		id: 4,
		label: "重庆",
		parent_id: 0,
		children: [
			{
				id: 119,
				label: "南川区",
				parent_id: 4,
				cityCommunity: [
					{area_id: 119, id: 5, label: "南川区-社群名称111",},
					{area_id: 119, id: 6, label: "南川区-社群名称222",}
				],
			}
		],
	},
]

methods 处理方法：

// 请求接口获取筛选项数据
communityListDataSet(){
	...
	this.communityListData = res.data;
	this.manageCommunityListThreeLevel()
	...
},
 
/*
处理接口返回数据：筛选项数据删除无社群数据的城市、省份
如：天津、北京-朝阳区2，无社群数据
*/
// 处理三级无社群数据
manageCommunityListThreeLevel(){
	let communityLen = this.communityListData.length
	for(var i=communityLen-1;i>=0;i--){
		let communityChildrenLen = this.communityListData[i].children.length
		for(var j=communityChildrenLen-1;j>=0;j--){
			if(!this.communityListData[i].children[j].cityCommunity.length){
				this.communityListData[i].children.splice(j,1)
			}
		}
	}
	this.manageCommunityListTwoLevel()
},
// 处理二级无城市数据
manageCommunityListTwoLevel(){
	let communityLen = this.communityListData.length
	for(var i=communityLen-1;i>=0;i--){
		if(!this.communityListData[i].children.length){
			this.communityListData.splice(i,1)
		}
	}
	this.communityListArray = [
		this.communityListData,
		this.communityListData[0].children,
		this.communityListData[0].children[0].cityCommunity,
	]
},
 
// value 改变时触发 change 事件
bindMultiPickerChange: function (e) {
	// console.log(e)
	this.multiIndex = e.detail.value
},
// 某一列的值改变时触发 columnchange 事件
bindMultiPickerColumnChange: function (e) {
	if(!this.multiIndex || !this.multiIndex.length){
		this.multiIndex = [0,0,0]
	}
	
	let column = e.detail.column;
	let value = e.detail.value;
	// console.log(column , value);
	
	let multiIndex = this.multiIndex;
	multiIndex[column] = value;
	if(column == 0){
		multiIndex[1] = 0;
		multiIndex[2] = 0;
	}
	if(column == 1){
		multiIndex[2] = 0;
	}
	this.multiIndex = multiIndex;
	
	let communityListArray = [];
	communityListArray[0] = this.communityListData;
	communityListArray[1] = this.communityListData[multiIndex[0]].children;
	if(this.communityListData[multiIndex[0]].children[multiIndex[1]].cityCommunity){
		communityListArray[2] = this.communityListData[multiIndex[0]].children[multiIndex[1]].cityCommunity;
	}else{
		communityListArray[2] = [];
	}
	this.communityListArray = communityListArray;
},

交互效果截图

 最终处理后的数据，天津、北京-朝阳区2，已从筛选器中删除