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

扫盲:
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');
				});
			}
}

你可能感兴趣的:(uView,uni-app,vue2.0,uni-app)