uview-plus u-picker的defaultIndexs修改后无效的问题

最新推荐文章于 2024-08-22 19:33:43 发布
最新推荐文章于 2024-08-22 19:33:43 发布
阅读量1k 收藏
点赞数
文章标签： 前端 uniapp vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andylou_1/article/details/134498713
版权

uniapp项目中使用了uview-plus组件库，在使用u-picker组件时，发现其默认的选中属性

defaultIndex是一次性的，修改后无法响应，解决办法就是在u-picker源码中修改这个属性的watch,源码位置在uni_modules/uview-plus/components/u-picker/u-picker.vue，或者直接跳转，找到watch项，把defaultIndex项下加上deep:true,如图：

andylou_1
关注
uniapp 使用uview 组件 DatetimePicker 默认值无效问题
weixin_41173973的博客
07-12 890
【代码】uniapp 使用uview 组件 DatetimePicker 默认值无效问题。
微信小程序 vant Picker组件default-index不生效的解决办法
qq_57952018的博客
05-30 709
微信小程序 vant Picker组件default-index不生效的解决办法
picker和u-picker的赋值区别
最新发布
weixin_63643304的博客
08-22 121
【代码】picker和u-picker的赋值区别。
mint-ui picker 选择器 用defaultIndex 修改选中项失败
lizhen_software的博客
12-22 4766
这种修改失败时可以使用picker 实例上的一些方法： <mt-picker :slots="slots2" ref="picker2" @change="onValuesChange2"></mt-picker> 先绑定实例，然后调用实例的setValues方法 self.$refs.picker2.setValues([self.endHour]) setV...
uniapp中uview组件库中丰富的Picker 选择器用法
精通前端技术，了解后端接口
12-29 3122
data() {return {columns: [[{label: '雪月夜',// 其他属性值id: 2021// ...}, {label: '冷夜雨',id: 804}]],
uView框架中DatetimePicker选择器设置默认值
weixin_69666355的博客
06-25 5563
uview的文档有个defaultIndex属性设置各列的默认索引，但是使用发现无效果。需求是页面显示的哪天日期 点开就是哪天的日期。解决方案：使用innerValue。2.在点击显示日期弹框的地方使用。1.给选择器添加ref。
记录 uniapp 使用uview 组件 DatetimePicker 默认值无效问题
Zzhwkpd的博客
02-28 1144
然后把后台数据改成标准格式 时间戳格式绑定都没有用 最后用 $ref 解决这个问题。在点击展示方法里写上 （因为我这是根据我项目来改的，具体根据项目来调整）后台返回的日期 v-model绑定 组件却还是显示原来的初始日期。修改之后再点击就是展现默认值位置的日期了。
van-picker组件default-index属性设置不生效踩坑
weixin_42504805的博客
10-12 1318
van-picker组件default-index属性设置不生效踩坑
uview中的picker动态回显问题
qq_44684550的博客
12-07 2202
u-picker组件通过v-if条件渲染，只有在show2为true时才会渲染。通过在loadData方法中设置show2来确保在数据加载完成后渲染u-picker组件，这样defaultIndex就会生效。一种解决方案是使用v-if条件渲染，确保在数据加载完成后再渲染u-picker组件。这样可以确保defaultIndex在组件首次渲染时生效。u-picker的defaultIndex属性是一次性的，无法在数据变化后动态回显，那么我们可能需要尝试一些其他方法。
关于 uview 的indexList跳转不到位的问题：添加方法@select=“clickSelect“
weixin_63515766的博客
01-12 1714
关于 uview 的indexList跳转不到位的问题
uView 组件中 picker 校验问题
weixin_46462541的博客
09-27 2266
123132
时间日期选择器（包含中英文）
10-29
日期时间选择器（开始时间-结束时间）包含解析好的中文版本，对应我的博文《日期时间选择器（开始时间-结束时间）》
移动端效果之IndexList详解
08-29
主要为大家详细介绍了移动端效果之IndexList，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
uview2.x u-picker省市区的数据js
06-01
uview2.x u-picker省市区的数据js
uview框架的u-picker组件的使用
热门推荐
qq_50563868的博客
08-10 1万+
u-picker
uView-UI_1.8.3.zip
04-01
对于`uview-ui`目录，其结构通常包括CSS样式文件、JavaScript逻辑代码、图标资源等，每个组件都有独立的文件夹，方便开发者查找和修改。通过查看源码，我们可以学习到组件的实现原理，甚至根据自身需求进行二次开发...
uview组件库 u-picker组件选项滑动选中延时、单列选择器默认选中
weixin_55648290的博客
03-18 6892
uview组件库 u-picker组件选项滑动选中延时、单列选择器默认选中
uview-plus中的picker组件用法
06-02
在uView Plus中，picker组件是一种常用的UI组件，用于用户在多个选项中选择一个选项。它支持多种选择模式，如单列模式、多列模式、时间选择器等。以下是picker组件的基本用法： 1. 单列模式 ```html <uni-picker mode="selector" :range="{{['选项1','选项2','选项3']}}" @confirm="onPickerConfirm"> <view>请选择</view> </uni-picker> ``` 在单列模式中，我们通过设置mode属性为"selector"来指定选择器的模式。同时，通过设置range属性来指定选项列表。在用户选择完选项并点击确定按钮后，会触发confirm事件，我们可以在事件处理函数中获取选中的值。 2. 多列模式 ```html <uni-picker mode="multiSelector" :range="{{multiRange}}" @confirm="onPickerConfirm"> <view>请选择</view> </uni-picker> ``` 在多列模式中，我们通过设置mode属性为"multiSelector"来指定选择器的模式。同时，通过设置range属性来指定多列选项列表。我们需要将每列选项列表保存在一个数组中，然后将这些数组组成一个数组，作为range属性的值。在用户选择完选项并点击确定按钮后，会触发confirm事件，我们可以在事件处理函数中获取选中的值。此外，我们还需要在data中定义一个multiIndex变量来保存每列选中的索引值。 3. 时间选择器 ```html <uni-picker mode="time" @confirm="onPickerConfirm"> <view>请选择时间</view> </uni-picker> ``` 在时间选择器中，我们通过设置mode属性为"time"来指定选择器的模式。在用户选择完时间并点击确定按钮后，会触发confirm事件，我们可以在事件处理函数中获取选中的时间值。 在以上示例代码中，我们都绑定了confirm事件，然后在事件处理函数中获取选中的值。我们可以根据实际需求来选择合适的模式和设置选项，以满足我们的业务需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值