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
　　})

• 最终效果：