u-picker多列用法和设置默认选中值

这篇具有很好参考价值的文章主要介绍了u-picker多列用法和设置默认选中值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uview官方文档并未对多列操作和如何设置默认值做过多的说明,本文就其来做详细的使用解释:

一、简介

<u-picker title="选择图书馆/岗位" keyName="name" @cancel="cancelChange" :loading="loading" ref="uPicker" @change="changeHandler" @confirm="libConfirm" :show="showChange" :columns="[changeLibList, changeDpartList]"></u-picker>
  • keyName="name" ,意思是name 作为 piker 选项显示的关键字
  • columns作为一个数组,其内部有几个成员,则代表有当前piker有几列
  • cancel、change、confirm 分别为取消、改变选值和确定执行的几个方法
  • title为piker的顶部标题;loading为true时,会打开加载动画

u-picker多列用法和设置默认选中值

二、 使用 

本文的 columns = [changeLibList, changeDpartList] 里面有changeLibList changeDpartList 两个数组成员,changeLibList 为第一列数据,changeDpartList 为第二列数据。changeLibList changeDpartList 数据结构大概如下所示:

this.changeLibList = [{"id":1,"name":"赛尔威"},{"id":2,"name":"龙岗图书馆"}]
this.changeDpartList= [{"id":1,"name":"行政"},{"id":2,"name":"人事"}]

每次打开页面时,在onShow勾子中重新请求接口数据 (防止数据在别的系统有所变化,如果你的数据是固定不变的,则只获取一次即可)

this.$refs.uPicker.setIndexs(0, 0) 设置第一列的默认选中值为第一个(微信小程序无法将picker实例传出来,只能通过ref操作),但此方法只适用于小程序,app用此方法后可能会造成列表不能滑动等bug

async onShow () {
			// 每次都重新拿新数据
			this.changeLibList = await UserApi.libraryListOfuser(this.user.id)
			this.changeDpartList = await UserApi.getLibraryJobList(this.changeLibList[0].id)
			// 防止每次默认选中值不一致,设置其每一列的默认选中值都为第一个
			this.$refs.uPicker.setIndexs(0, 0)
		},

在每次切换时,调用 changeHandler方法请求接口拿到对应的第二列数据,赋值给changeDpartList,如下:文章来源地址https://www.toymoban.com/news/detail-460695.html

async changeHandler(e){
			       	const {
					value,
					columnIndex,
				} = e
				if (columnIndex === 0) {
					// 打开加载状态
					this.loading = true
					// 模拟网络请求
					this.changeDpartList = await UserApi.getLibraryJobList(value[0].id)
					// 关闭加载状态
					this.loading = false
				}
			},

到了这里,关于u-picker多列用法和设置默认选中值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包