學習網站建設的網站品牌互動營銷案例
問題描述：
后臺管理系統(tǒng)，這次投產完線上出現了個問題！element-ui組件下拉選項框打開全部都是無數據，而且控制臺報錯，但是新添加的數據是正常顯示的。對比了原因之后發(fā)現，新的數據前端傳給后端的格式："[{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 => {
})
2)?接口返回的出參格式轉化?"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
????????????????}
????????})
})?