问题描述：
后台管理系统，这次投产完线上出现了个问题！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
}
})
})