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