elementUI table 關於嵌套表格第二層數據的獲取與渲染

• 問題一：MySQL取數據json格式數據時，到前端的數據是string類型
• 解決方法：forEach遍歷取到的返回值，將字符串類型用JSON.parse轉換成json

以下例子中sale_info在數據庫中是json格式。

axios({
       url:'/getSalesList',
       method:'post',
       data:qs.stringify(that.userInfo)
})
   .then(function (result) {
       var saleInfoArr = result.data
       saleInfoArr.forEach(function (value,i,arr) {
           arr[i].sale_info = JSON.parse(arr[i].sale_info)
       }
     })
    that.saleList = saleInfoArr
})

• 問題二：當json對象只有一個時，由於數據不是數組，vue無法渲染而報錯
• 解決辦法：判斷轉換后的json是數組還是對象，如果不是數組，把對象轉換成數組

axios({
    url:'/getSalesList',
    method:'post',
    data:qs.stringify(that.userInfo)
})
    .then(function (result) {
       var saleInfoArr = result.data
       saleInfoArr.forEach(function (value,i,arr) {
         arr[i].sale_info = JSON.parse(arr[i].sale_info)

            if(!Array.isArray(arr[i].sale_info)){  //判斷是否為數組
               const objToArr = [];　　　　　　　　　 //創建一個臨時數組
               objToArr.push(arr[i].sale_info)     //將對象push進臨時數組
               arr[i].sale_info = objToArr         //覆蓋賦值
             }

        })
         that.saleList = saleInfoArr
　　})

• 最終效果：