问题描述:
后台管理系统,这次投产完线上出现了个问题!element-ui组件下拉选项框打开全部都是无数据,而且控制台报错,但是新添加的数据是正常显示的。对比了原因之后发现,新的数据前端传给后端的格式:"[{name:1}, {name:2}]",是这样的字符串,所以后端再传回来的时候,是有对应的key 和 value值的,只需将字符串处理成数组即可。
但是老的数据,后端返回给我的是这样的:"1, 2" ,这样的格式给我,那页面肯定显示不出来呀,而且也就报错。
本来就是后端的问题,但是他说不好改,于是只能前端来处理传递的入参格式了,下面分享下处理方法!
解决方法:
1)入参格式转化 "[{name:1}, {name:2}]" 转成 "1,2"这种形式传给后端
let dialogFormObj = {}
let arr = []
if (this.options && this.options.length !==0) {
this.options.map(v => {
// 此处判断下拉选是否有值,有再push进数组
if (v.name !== ' ') {
arr.push(v.name)
}
})
dialogFormObj = JSON.parse(JSON.stringify(this.dialogForm))
// 此处判断数组是否是空数组,如果是空数组就不传options这个字段,因为我的项目中还有其他类型的输入框,如果传了空的,在JSON解析的时候会报错
if (arr.length !== 0) {
dialogFormObj.options = arr.join(',')
}
}
addTemplate(dialogFormObj).then(res => {
})
- 接口返回的出参格式转化 "1,2" 后前端再转成 [{name:1}, {name:2}]类型,进行渲染
let obj = {id: this.id}
getInfo(obj).then(res => {
let optionsArr = []
res.data.forEach(i => {
if (i.options) {
// 字符串分割成数组
i.options = i.options.split(',')
// 下一次添加前先清空之前的
optionsArr = []
// 此处遍历数组,为每一个属性添加key值,转成数组对象形式。当然这种方式仅针对key相同的,如果每一个key都不同,要采取另外的办法了
i.options.forEach(v => {
const obj = {}
obj.name = v
optionsArr.push(obj)
})
i.options = optionsArr
}
})
})