引言

在文章 01.uni-app的picker如何使用后端传递过来的对象列表作为数据源中我们实现了新增页面适用后端接口传递过来的数据对象列表作为picker的数据源。当我们数据新增后需要修改，将上一步保存到数据库的值在界面上picker的数据列表中匹配出来并显示给用户，这个该怎么做呢？

代码

html代码还和新增界面一样，主要是js中初始化的代码

<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: {
			initPageData : function(){
				/** 第一步数据初始化 **/
				/**
				 * _self.tenantList：是接口返回的客户列表
				 * _self.driver.tenantId：这个是我们新增页面保存到数据库中的客户id，所属对象为driver
				 * _self.getArrayIndex: 这个函数的作用是找出我们上次保存到数据库中的tenantId在tenantList中的下标
				 **/
				_self.tenantIndex = _self.getArrayIndex(_self.tenantList,_self.driver.tenantId);
				/** _self.forData.tenantId也可以直接等于driver.tenantId,下面这种写法可以在页面上校验数据的准确性      
				 * 下标和具体的值都确定后通过双向绑定我们保存在数据库中的值就会显示在界面上
				 **/
				_self.formData.tenantId = _self.tenantList[_self.tenantIndex].tenantId;
			}
		}
	}
</script>