关于uni-app中picker数据为对象数组如何使用，及获取picker选择之后的数据

---

先直接上展示和代码

这是完成后的效果展示

template中的代码

<view class="info-item">
				货主：
	<picker @change="bindPickerChange($event,storageCustomList)" :value="index" :range="storageCustomList" :range-key="'CustGoodsName'">
		<view class="uni-input">{{storageCustomList[index].CustGoodsName}}</view>
	</picker>
</view>

javascript中的代码

<script>
	export default {
		data() {
			return {
				// picker下拉数据源
				storageCustomList: [{
					CustGoodsCode: "TEST001",
					CustGoodsName: "测试货主001",
					IfBoxId: 0,
					IfProductId: 0,
				},{
					CustGoodsCode: "TEST002",
					CustGoodsName: "测试货主002",
					IfBoxId: 0,
					IfProductId: 0,
				},{
					CustGoodsCode: "TEST003",
					CustGoodsName: "测试货主003",
					IfBoxId: 0,
					IfProductId: 0,
				}],
				index: 0,
				pickerData:''
			};
		},
		methods: {
			// picker修改事件
			bindPickerChange: function(e,storage) {
				console.log(e)
				console.log(storage)
				this.index = e.target.value
				this.pickerData = storage[this.index]	// 这里就是选中的对象
			},
		}
	}
</script>

---

提示：以下是本篇文章正文内容，下面案例可供参考

使用介绍

这是官方文档地址uin-app官方文档picker如何使用，但是里面只有一些简单的使用案例

这里我们主要使用的就是这个range-key这个属性
这是官方的介绍：当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

所以，我们使用的时候只需要这样写就可以了

加上这句属性:range-key="'CustGoodsName'" 其中里面的CustGoodsName是我这个对象数组要显示的数据，使用时只需要根据自己实际需求展示即可。但是别忘了双引号里面显示的属性要加上单引号''。这个一定要加上的。

获取选择的数据

picker选择之后，基本上都是要用到选择的数据的，我们在@change="bindPickerChange($event,storageCustomList)"这个方法里面，看到有两个参数，第一个参数$event就是指当前触发的是什么事件（鼠标事件，键盘事件等）。
第二个参数storageCustomList就是我们picker的数据，我们有了picker的数据，和选择的下标，那么就可以获取到选择后的数据了this.pickerData = storage[this.index]

总结

这些就是uni-app中picker的简单实用方法了，本篇包含了数据为对象数组时如何使用，及获取picker选择之后的数据。基本使用就是这样了