u-view的u-select组件除了label和value,传递其他参数

在前端开发中,经常需要在组件间传递额外信息。本文通过一个具体的例子展示了如何利用`extra`字段在`u-select`组件中保存并传递每个选项的额外属性,如在获取行业分类数据时,将`label`、`value`和`extra`(如`dictCode`)一同绑定到数据对象上。当选择项被确认时,可以方便地获取这三个参数,用于后续的业务处理。
摘要由CSDN通过智能技术生成

组件除了label和value,还可以传递其他参数,用extra进行传递:

例如在给u-select绑定的array赋值时,extra用来保存每个数据的一个额外属性

<u-select  :list="industryCodeList" @confirm="confirm"></u-select>

其中industryCodeList像这样赋值:

this.myhttp.post('device', '/basic/region/xxxxlist', {
					dictKey: dictKey,
					parentId: parentId
				}).then((res) => {
					if (res.status == 0) {
						var list = [];
						for (var i in res.data) {
							var object = {};
							object.label = res.data[i].dictValue; // 展示label
                            object.value = res.data[i].id; // 用id查询行业小类
							object.extra = res.data[i].dictCode; // 传递额外的参数
							list.push(object);
						}
                        this.industryCodeList = list;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});

这样在选项被选中的时候,就可以把label、value、extra三个参数取出来使用了:

confirm(e) {
				this.form.industryCode = JSON.parse(JSON.stringify(e[0])).label;  // 用于页面上实际展示
				this.industryCode = JSON.parse(JSON.stringify(e[0])).value;
				this.industryCodeSubmit = JSON.parse(JSON.stringify(e[0])).extra; // 使用extra额外的传参进行传递
			},

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值