引言

在文章 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"></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>

uni-app.03.初始化picker下拉列表的默认值相关推荐

html5下拉列表默认值,element-ui中的select下拉列表设置默认值方法_简单_前端开发者...
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来那如何修改呢? 上element ...
Java动态初始化数组，元素默认值规则
1.动态初始化数组: 定义数组的时候,只确定元素的类型和数组的长度,之后再存入具体数据. 2.动态初始化数组的基本原理: 当你赋值后,数组的默认值0,就会变成你赋的值. 3.数组的动态初始化格式: 格 ...
Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部代码如下: 1 <a-select v-model="que ...
java 数组定义、动态初始化、默认值
一.数组的定义与格式: 数组就是用来存储一批同种类型的内存区域. 1.格式:(定义数组直接给数组赋值) 数据类型[] 数组名 = new 数据类型[] {元素1,元素2,元素3,-}; 简化写法: 数 ...
java系列4:数组的默认值
使用动态初始化数组的时候,其中的元素将会自动拥有一个默认值. 规则如下: 如果是整数类型,那么默认为0 如果是浮点类型,那么默认为 0.0 如果是字符类型,那么默认为"\u0000" ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
jsp select初始化赋值_分别在javascript和JSP中动态设置下拉列表默认值
一.JavaScript中动态设置select标签中选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 jsp部分代码如下: 图2 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

uni-app.03.初始化picker下拉列表的默认值

初始化picker下拉列表的默认值

引言

代码

uni-app.03.初始化picker下拉列表的默认值相关推荐

最新文章

热门文章