欢迎加入QQ群一起探讨交流:581902292

vant-weapp - 多级联动

//数据结构
let areascolumns = [
	{
		values: areas,
		className: 'column1',
	},
	{
		values: areas[0]['children'],
		className: 'column2'
	},
	{
		values: areas[0]['children'][0]['children'],
		className: 'column3'
	}
]

//对应节点				
<van-popup
  show="{{ true }}"
  position="bottom"
  custom-style="min-height:20%"
  bind:close="offareaListhandle">
  <van-picker 
    bind:cancel="offareaListhandle"
    bind:confirm="areaListhandle"
    bind:change="areasChange"
    title="区域"
    show-toolbar
    columns="{{ areascolumns }}" />
</van-popup>


// 区域变动
areasChange(event){
	const { picker, value, index } = event.detail;
	if(index===0){
		// 变动第一列
		picker.setColumnValues(1, value[0].children)
		picker.setColumnValues(2, value[0].children[0].children)
	}else if(index===1){
		// 变动第二列
		picker.setColumnValues(2, value[1].children)
	} else if (index === 2){
		// 变动第三列
		picker.setColumnValues(2, value[1].children)
	}
},


//对于异步数据可用下面方法处理结构
organTree(data, parentOrganNo) {
	let itemArr = [];
	for (let i = 0; i < data.length; i++) {
		let node = data[i];
		if (node.parentOrganNo == parentOrganNo) {
			let newNode = {};
			newNode.text = node.fullCname;
			newNode.organNo = node.organNo;
			let child = this.organTree(data, node.organNo);
			newNode.children = child.length > 0 ? child : '';
			itemArr.push(newNode);
		}
	}
	return itemArr;
}

  

posted @ 2020-07-09 19:16  £AP︶ㄣOL◢◤LO  阅读(543)  评论(0)    收藏  举报