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