uni内置组件picker多列选择器第一列切换第二列数据更新出错

多列选择器
mode = multiSelector

属性名类型默认值说明
range二维 Array / 二维 Array<Object>[]mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[[“a”,“b”], [“c”,“d”]]
range-keyString当 range 是一个二维 Array<Object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueArray[]value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)
@changeEventHandlevalue 改变时触发 change 事件,event.detail = {value: value}
@columnchangeEventHandle某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标
@cancelEventHandle取消选择时触发(快手小程序不支持)
disabledBooleanfalse是否禁用(快手小程序不支持)
<picker class="jui-flex1" mode="multiSelector" :value="pickerIndex" :range="pickerData" range-key="userName" @change="pickerChange" @columnchange="pickerColumnchange">
	<text>{{driverData[1][driverIndex[1]].userName}}</text>
</picker>

<script>
export default {
	data(){
		return {
			pickerIndex:[0,0],
			pickerData:[[{vluae: 0, userName: '常用司机'},{vluae:1, userName: '全部司机'}]],//司机列表数据,二维数组,第一个数组表示第一列,第二个数组表示第二列
			pickerColumnData:[[{id:1,userName:'张三'}][{id:2,userName:'李四'}{id:3,userName:'王五'},{id:4,userName:'赵六'}]],
		}
	},
	mounted(){
		//默认展示常用司机
		this.pickerData[0]=[{vluae: 0, userName: '常用司机'},{vluae:1, userName: '全部司机'}];
		this.pickerData[1] = this.pickerColumnData[0];
	},
	methods: {
		//选择
		pickerChange(e){
			this.pickerIndex= e.detail.value;
		},
		//某一列值改变,app及h5需使用两种不同的方法改变第二列值
		pickerColumnchange(e){
			if( e.detail.column == 0 ){
				// #ifndef APP-PLUS
				this.pickerData[1] = this.pickerColumnData[e.detail.value];
				// #endif
				// #ifdef APP-PLUS
				this.pickerData.splice(1, 1,this.pickerColumnData[e.detail.value]);
				// #endif
			}
		},
	}
}




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
本课程讲了Vue3+Vue2+Uni-app(uniapp)入门基础与实战,其中还重点讲解了ES6、TypeScript这些基础知识,实战由两大价值5000元的真实企业级项目组成,分别是仿京东电商网站和仿美团微信点餐小程序,同时两大项目代码全部赠送,还赠送前后端架构模板,工作中直接使用。VUE和uni-app是目前热门的前端框架,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件和插件,正式上线白屏问题,性能优化、解决iphoneX“刘海”兼容性问题、微信支付、微信授权登录,获取位在地图上显示,获取用户所在的城市和街道信息,微信小程序发布审核等。对正在工作当中或打算学习VUE和uni-app高薪就业的你来说,那么这门课程便是你手中的葵花宝典。学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目。只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。此vue和uni-app课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!代码和ppt均可下载!免费提供《企业级完整实战项目接口文档》,绝对可用
Picker选择的用法可以分为以下几个步骤: 1. 声明Picker组件 在HTML中使用`<select>`标签来声明Picker组件,每个`<select>`标签代表一个,同时需要为每个`<select>`标签指定一个唯一的id,以便后面的JavaScript代码可以找到对应的。 ```html <select id="column1"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> <select id="column2"> <option value="optionA">Option A</option> <option value="optionB">Option B</option> <option value="optionC">Option C</option> </select> ``` 2. 获取选中的选项 在JavaScript中,可以通过`document.getElementById()`方法获取每个的DOM元素,然后通过`selectedIndex`属性获取当前选中的选项的索引,再通过`options`属性获取所有选项的数组,最后通过选项的索引获取选项的值。 ```javascript var column1 = document.getElementById("column1"); var column2 = document.getElementById("column2"); var option1 = column1.options[column1.selectedIndex].value; var option2 = column2.options[column2.selectedIndex].value; ``` 3. 监听选项变化事件 为了响应用户的操作,可以为每个添加`onchange`事件监听,当用户选择不同的选项时,就会触发相应的事件处理函数。 ```javascript column1.onchange = function() { var option1 = column1.options[column1.selectedIndex].value; var option2 = column2.options[column2.selectedIndex].value; console.log(option1, option2); }; column2.onchange = function() { var option1 = column1.options[column1.selectedIndex].value; var option2 = column2.options[column2.selectedIndex].value; console.log(option1, option2); }; ``` 4. 动态更新选项 如果需要根据用户的选择动态更新其他的选项,可以在事件处理函数中修改对应的选项。例如,当用户选择了第一个的第一个选项时,第二个的选项就会更新为A、B、C三个选项。 ```javascript column1.onchange = function() { var option1 = column1.options[column1.selectedIndex].value; if (option1 === "option1") { column2.options.length = 0; column2.options.add(new Option("Option A", "optionA")); column2.options.add(new Option("Option B", "optionB")); column2.options.add(new Option("Option C", "optionC")); } else { column2.options.length = 0; column2.options.add(new Option("Option X", "optionX")); column2.options.add(new Option("Option Y", "optionY")); column2.options.add(new Option("Option Z", "optionZ")); } }; ``` 通过以上步骤,就可以实现一个简单的Picker选择。需要注意的是,以上示例只包含两选项,实际使用中可能需要根据具体需求添加更多的

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值