如何将字符串展示到table某列中展示

请求到的数据是

展示到页面的呈现效果：

处理思路：

处理思路：
1、把请求的数据进行对应的特殊字符串进行处理，处理成数组
2、把此数组在赋值到当前请求的对象的对应的值，变相修改数据结构
3、页面展示，我的页面查询的方式是使用vue 绑定展示的效果

 //表单数据处理主要是对sku处理
    showTable : function(data){
      var spu = new Array();
      var strSub='';
        for(let i=0;i<data.length;i++){
          spu.length = 0;
          let dataspu = JSON.parse(data[i].spus);
          for(var key in dataspu){
              if(typeof dataspu[key]=='object'){
                  for(let j=0;j<dataspu[key].length;j++){
                      strSub=dataspu[key][j];
                  }
              }else{
                  strSub+=dataspu[key];
              }
              spu.push({"name":key,"name2":strSub})
          }
          data[i].spus = spu;
        }
        this.tableData = data;
    },

页面展示处理方法
 <el-table ref="multipleTable" :data="tableData" @selection-change="changeFun" tooltip-effect="dark" :default-sort = "{prop: 'date', order: 'descending'}" style="width: 100%" :max-height="tableHeight">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="imgPath" label="图片" sortable width="120">
            <template scope="scope">
              <img  :src="scope.row.logo" alt="" style="width: 115px;height: 115px">
              <span style="display:none;">{{scope.row.logo}}</span>
            </template> 
          </el-table-column>     
          <el-table-column  sortable prop="name" label="宝贝名称" min-width="180"></el-table-column>
          <el-table-column  sortable prop="subtitle" label="副标题" min-width="180"></el-table-column>
          <el-table-column  sortable prop="shop_type" label="类目" min-width="120"></el-table-column>
          <el-table-column  sortable prop="shop_level" label="品牌"  min-width="120"></el-table-column>
          <el-table-column  sortable prop="skuName" label="SKU名称" min-width="120">
            <template scope="scope"> 
                <span>{{scope.row.skuName?scope.row.skuName:'--'}}</span><br/>
                <span>{{scope.row.salesFlag==1?'上架':'下架'}}</span>
            </template>
          </el-table-column>
          <el-table-column  sortable prop="spus" label="SPU"  min-width="280">
              <template scope="scope"> 
                <!--此处是展示请求的数组对象的某个值处理后的展示方式-->
                <el-col :span="24" v-for="item in scope.row.spus">
                    <span style="color:#000;">{{item.name}}:</span>
                    <span style="color: rgb(64, 158, 255);font-size: 10px;">{{item.name2}}</span>
                </el-col>
              </template>
          </el-table-column>
          <el-table-column  sortable prop="shopName"  label="店铺名称" min-width="120"></el-table-column>
          <el-table-column  sortable label="店铺旺旺" min-width="120">
            <template scope="scope">
              <a :href="'https://shopsearch.taobao.com/search?app=shopsearch&q='+scope.row.taobaocode" target="_blank">
                <span>{{scope.row.taobaocode?scope.row.taobaocode:''}}</span>
              </a>
            </template>
          </el-table-column>
          <el-table-column  sortable prop="shop_fans" label="客户名称" min-width="120"></el-table-column>
          <el-table-column  sortable prop="monthlySales" label="月收货量" min-width="120"></el-table-column>
          <el-table-column  sortable prop="followStatus" label="关注状态" min-width="120">
            <template scope="scope"> 
              <span>{{scope.row.followStatus == 1?'已关注':'未关注'}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="col-md-12 block" style="float:right;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"  style="float: right;margin-top:10px;">
          </el-pagination>
        </div>