vue 下拉框回显映射
大家在做项目的时候,应该非常的容易遇到,下拉框的回显问题吧? 包括单选框,复选框,级联框的回显
如果使用组件的话, 比如element-UI,他们内部有自己的映射方法,将id传过去自己能回显到下拉框中,还是挺方便的,可是如果给一个id 让你映射出他所对应的名字,你要怎么办呢? 让我们一起来看看吧?
单选框
后端返回的:
value: '选项1'
下拉数组:
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
// 映射方法
formatterName(options, value) {
let obj = {}
obj = options.find(item => item.value=== value)
return obj.label
},
// 输出: 黄金糕
多选框
后端返回的:
value: ['选项2,选项4']
下拉数组:
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
// 映射方法
formatterName(options, value, idArr = []) {
if (typeof options=== 'object') {
for (let i = 0; value[i] !== undefined; i++) {
for (let j = 0; options[j] !== undefined; j++) {
if (value[i] === options[j].value) {
idArr.push(options[j].label)
}
}
}
}
return idArr
},
// 输出: ['双皮奶','龙须面']
级联框
后端返回的:
value: ['zhinan','shejiyuanze','fankui']
下拉数组:
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}]
// 映射方法
formatterName(options, value, idArr = []) {
if (typeof options === 'object') {
for (let i = 0; value[i] !== undefined; i++) {
for (let j = 0; options[j] !== undefined; j++) {
if (value[i] === options[j].value) {
idArr.push(options[j].label)
}
}
}
for (let i = 0; options[i] !== undefined; i++) {
this.formatterName(options[i].children, value, idArr)
}
}
return idArr
},
// 输出: ['指南','设计原则','反馈']
欢迎指正,再会