uView的select列选择器

最新推荐文章于 2024-05-14 19:37:53 发布
最新推荐文章于 2024-05-14 19:37:53 发布
阅读量5.7k 收藏 1
点赞数 1
分类专栏： 移动端 文章标签： uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49078296/article/details/117119321
版权

uView的select列选择器多列联动模式的坑!

需要写一个省 市 县的三级联动效果，第一行的第三列是空的，我拿到的第一行的第三列的数据是null

第一张图是我拿到的数据通过接口拿到的数据
第二张图是接口数据实现的效果
实现的效果

第三张图是我需要实现的效果（广东后一列显示空白，广西后一列正常显示）
理想的实现效果

解决办法：给第一行的第三列的数据的赋一个空值

data[0].children[0].children = [{}]

第四张图是处理之后的数据
在这里插入图片描述

徐_三岁
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
UView 时间选择器源代码修改，增加可选‘年’、‘年-月-日-时’的功能更
07-24
下载后直接替换原本的代码即可
uview使用u-picker动态加载columns不显示的问题【已解决】
weixin_40918145的博客
01-26 1462
很奇怪，虽然这者得到的结果是一样的，但是就是有问题，谁懂？【背景】picker里面的数据需要动态加载。
uview select封装单选和多选
qq_42180156的博客
10-29 4911
uview是没有多选的，根据业务需求就自己封装了一个组件 一般多选的话是要加字段，根据字段判断，这个思路值得记录下 <template> <view class="slot-v"> <!-- 单选 --> <u-input v-model="inputValue" type="select" @click="selectShow = true" :placeholder="placeholder" /> <!-- 多选 --&g
uView下拉菜单组件u-dropdown设置高度并防止滑动穿透_u-dropdown展开后和顶部有距离(1)
最新发布
2401_85015200的博客
05-14 666
u-dropdown内容自定义时设置高度，滑动时会带动父级，真机滑动会出现问题。1、定义内容时设置高度并设置可滑动，可以配合scroll-view组件使用。2、处理真机滑动出现问题的情况（防止滑动穿透）
uniapp 日期选择器、u-select选择器
lingjx1617的博客
11-18 6516
select选择器 html代码： //@click：点击显示选择器并传值 <view @click="pickerSelectFun(item.field,item.operate)" style="display: flex;justify-content: space-between;line-height: 33px;"> <view class="txt">{{item.ti.
u-select uniapp 选择使用
热门推荐
maoxiaohei_的博客
03-12 1万+
具体配置参考u-view官方,此处只使用，方便自己项目复用 <template> <view class="leave_cont"> <view class="subNav"> <view class="subNav-icon icon"> <image src="../static/img/home/pickera-icon.png" mode=""></image> </view> &.
uniapp的u-select遇见的坑——解决uView u-select第二次弹出显示前一次选择内容，但实际获取值为第一项的问题！
lingrer的博客
01-29 1783
当我选择内容关闭后,再次调起时，仍然显示前一次选择项，但点击“确定”后，却是获得第一项的值。可以使用修改default-value的属性来动态改变默认选中的下标。3.// 将默认下标赋值为当前选中的下标。1、加上default-value属性。在返回选择器选择的数据的回调当中写。
uniapp的nviewUI组件库的u-select组件
hanchengmei的博客
08-02 4700
uview ui的select组件和其他第三方ui组件库有所不同： 1）u-select只是弹窗部分，不包含确定选项后的bar部分 2）v-model是布尔值，表示是否显示弹窗，而其他组件库大都是选中的值，一般为数组 3) mode是列数，single-column是单列 4）default-value是选中的值，也可设置默认值，是数组，元素是选中项index， 而不是value 5)list是select的options选项，是数组：{value,label}[] 6）$event是选中项，是数组 ..
记录解决日常小问题u-select
weixin_57002750的博客
06-03 1320
uview的选择器组件Select的bug
uview2.0uview2.0
04-22
在uView2.0中，我们能看到一系列精心设计的组件，如按钮、输入框、表格、导航栏、底部导航、滑动选择器、时间日期选择器、轮播图、加载提示、弹窗、抽屉、步骤条等，这些组件覆盖了日常开发中的常见需求。...
vue+iview地址选择器
08-07
Vue+IView地址选择器是一个基于Vue.js框架和IView UI库实现的高效、便捷的地址选择组件。这个组件提供了全国范围内的省市区三级联动选择功能，并且特别加入了华东、华北等大区的选择，使得用户在操作时可以更加直观...
自定义省市区三级选择器组件
02-05
在Vue3.0框架下，开发自定义省市区三级选择器组件是一项常见的需求，尤其对于构建具有地域选择功能的应用程序来说。本组件名为"RegionSelect"，它旨在提供一种便捷的方式来实现用户对省份、城市、区县的选择，并通过...
基于wheelView的自定义日期选择器
06-26
"基于WheelView的自定义日期选择器"就是一个很好的示例，它利用了WheelView这一滚动视图组件来实现用户友好的日期选择功能。这篇内容将深入探讨如何构建这样的选择器，以及其在Android开发中的应用和扩展性。 首先...
uview u-select单列使用
LO520_1314的博客
11-01 821
uview u-select单列使用
uniapp UI框架 UView1.8.6 u-select数据显示不出来
m0_48909912的博客
01-02 836
亲测成功解决！！！
uniapp实现多级菜单选择u-select
qq_41429765的博客
11-25 6552
html <button v-for='(item,index) in 5' :key="index" @click="changeSelectClass(index)">选择菜单</button> //此组件可以根据children的深度自动增加子级菜单 <u-select @click="show = true" :default-value="defaultValue" mode="mutil-column-auto" v-model="show" :li.
uView下拉框在微信小程序里不显示问题
jyf_568的博客
07-02 3916
我的下拉数据都是循环出来的 <u-form-item v-for="(item,index) in list.tuinaResultOptions" :label="item.name" prop="item.value" :key="item.id"> <u-input v-if="item.type===1" v-model="item.value" />...
uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 两个联动的Select选择器
YZRHANYU的博客
11-15 6470
uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 两个联动的Select选择器
uview的u-select三级联动（这里是1版本，不建议2版本）
m0_64207574的博客
11-13 1394
uview的u-select三级联动（这里是1版本，不建议2版本
uview 的 Select 列选择器 (可以通过value-name和label-name参数自定义)怎么写
05-27
您可以参考以下代码示例来创建一个带有自定义 value-name 和 label-name 的 uview Select 列选择器： ``` html <template> <view> <u-select :options="options" v-model="selected" value-name="id" label-name="name"></u-select> </view> </template> <script> export default { data() { return { options: [ { id: 1, name: '选项1' }, { id: 2, name: '选项2' }, { id: 3, name: '选项3' }, { id: 4, name: '选项4' }, { id: 5, name: '选项5' } ], selected: 1 } } } </script> ``` 在上述代码中，我们通过 `value-name` 和 `label-name` 属性来自定义选项的值和标签。在这个例子中，我们将 `value-name` 设置为 `id`，将 `label-name` 设置为 `name`。这样，在选中某个选项时，`v-model` 绑定的 `selected` 变量中就会保存该选项的 `id` 值。同时，显示在选择器中的标签则是该选项的 `name` 值。 您可以根据您的具体需求，自定义 `value-name` 和 `label-name` 属性的值。希望这个例子能够帮助到您。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值