uniapp+uview Select选择器数据绑定不是想要的问题

21 篇文章 0 订阅
9 篇文章 2 订阅

扫盲:
value用于在回调时,区别选择了哪一个(针对开发者),相当于键值对的_Key
label用于展示在选择器中,供用户选择和查看(针对用户),相当于键值对的_Value
描述:
在表单绑定中,如果后台传过来的数据是数字(也就是value),这个时候为了展示需要把数字转换成对应文字。
解决思路
1、拿到数据时对其进行转换,转换成对应值(也就是 label)
2、在提交到接口前,在对其进行转换,变成后台想要的数据。
Trouble
思路是对的,但是如果在列表数据多的情况下,就需要自己封装一个转换的方法了。方法如下:

找到 mian.js 文件:


// value:键 | label:值 根据已知"键" (value)"值" (label)
Vue.prototype.baseValueFindLabel = function(arrList, value) {
	var label = ''
	arrList.map((item, index) => {
		if (item.value == value) {
			label = item.label
			console.log(item.value + '=> old:' + value, 'if')
		}
	})
	return label;
}

// 根据已知"值" (label)"键" (value)
Vue.prototype.baseLabelFindValue = function(arrList, label) {
	var value = ''
	arrList.map((item, index) => {
		if (item.label == label) {
			value = item.value
			console.log(item.label + '=> old:' + label, 'if')
		}
	})
	return value;
}


               // list数据
				unitList: [{
						value: '',
						label: '请选择'
					},
					{
						value: 12,
						label: '/L'
					},
					{
						value: 11,
						label: '/票'
					},
					{
						value: 10,
						label: '/PCS'
					},
					{
						value: 9,
						label: '/KG'
					},
					{
						value: 8,
						label: '/TEU'
					},
					{
						value: 7,
						label: '/TON'
					},
					{
						value: 6,
						label: '/CBM'
					},
					{
						value: 5,
						label: '/40H'
					},
					{
						value: 4,
						label: "/45'"
					},
					{
						value: 3,
						label: "/40'"
					},
					{
						value: 2,
						label: "/20'"
					},
					{
						value: 1,
						label: '/BL'
					},

				],
....
created() {
   //使用后转换
    var lableUnit = this.baseValueFindLabel(this.unitList, this.paramJson.unit);
	this.$set(this.paramJson, 'unit', lableUnit);
},
methods:{
       saveData() {
				let that = this
				// 提交前转换
				var valueUnit = this.baseLabelFindValue(this.unitList, this.paramJson.unit);
				this.$set(this.paramJson, 'unit', valueUnit);
				
				that.$http.post('/order/addRwoDataFy', {
					appLoginUid: that.$myUserId,
					paramJson: JSON.stringify(that.paramJson)
				}).then((res) => {
					if (res.data.code == 1000) {
						that.$u.toast("保存成功!");
						that.goBackFa();
					} else {
						that.$u.toast("保存失败!");
					}
				}).catch(err => {
					that.$u.toast('接口调用失败');
					console.log(err, 'err');
				});
			}
}

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值