uni-app.01.picker如何使用后端传递过来的对象列表作为数据源

引言

今天要实现uni-app中的一个新增司机账户的功能，司机首先要选择该账户所属平台上哪一个客户，这里使用到了uni-app的picker

picker是从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。实现上述功能我们只需要选择默认的普通选择器即可

具体实现

picker之普通选择器

官网上给出的例子比较简单，数据源都是一个字符串数组，我们的需求是穿一个对象列表作为数据源就要用到上面属性中range-key

前端代码

<template>
	<view class="gui-form-item gui-border-b">
		<text class="gui-form-label">所属客户</text>
		<view class="gui-form-body">
			<picker mode="selector" :range="tenantList" :value="tenantIndex" @change="tenantChange($event,tenantList)" :range-key="'tenantName'">
				<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
					<text class="gui-text">{{tenantList[tenantIndex].tenantName}}</text>
					<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
				</view>
			</picker>
		</view>
	</view>
</template>
<script>
	var _self;
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					tenantId: '',
				},
				tenantList: [{tenantId:0,tenantName:'请选择所属客户'}],
				tenantIndex: 0,
			}
		},
		onLoad: function() {
			_self = this;
		},
		method: {
		// 切换客户
			tenantChange : function (e,tenantList) {
				console.log(e);
				console.log(tenantList);
				_self.tenantIndex = e.target.value;
				_self.formData.tenantId = tenantList[_self.tenantIndex].tenantId;
				console.log("================" + _self.formData.tenantId)
			}
		}
	}
</script>

关键代码说明

:range="tenantList" :value="tenantIndex" @change="tenantChange($event,tenantList)" :range-key="'tenantName'"

• :range="tenantList" 为picker绑定数据源
• :value="tenantIndex" 这个就不多说了，记录的是当前选择记录的下标（索引）
• @change="tenantChange($event,tenantList)" $event是当前dom元素，tenantList还是数据源
• :range-key="'tenantName'" 这个要特别注意，里面的一对单引号不要忘记了，他指定了数据源中tenantName的值作为选择器显示的内容

最终效果