uview三级联动方法

路远509

已于 2023-01-06 14:49:58 修改

阅读量3k

点赞数 6

文章标签： javascript 前端

于 2022-08-31 17:56:56 首次发布

本文链接：https://blog.csdn.net/weixin_63167957/article/details/126629095

版权

本文介绍了如何在前端项目中使用UView实现三级联动效果。首先，在页面`onShow`时初始化数据，接着配置组件事件。通过组件回调处理并存储最终数据，用于渲染。根据个人项目需求调整使用的数据，实现自定义的三级联动功能。

摘要由CSDN通过智能技术生成

组件标签使用（上面具体的属性和方法定义看官方文档）

先在onShow中定义一下初始数据

设置一下组件的事件

// 地区选择
			changeHandler(e) {
				const {
					columnIndex, //列id
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				const parentId = value[columnIndex].id
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					const cityList = this.shi.filter(item => item.parentId === parentId)
					const quList = this.qu.filter(item => item.parentId === cityList[0].id)
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnVa