【vue+python】 Vue列表展开渲染，解决共用一个数组，导致展开列表数组数据复用

解决思路：展开的列表设置成为一数组，一行列表数据使用唯一数组

JS部分：


定义：
 export default {
    data() {

    keyWorkRanking: [],

      }
   },请求数据:
          // 请求数据
          expandGoodsContent(resent,this.parentsasin).then(response => {
              if (response.code === 200) {

                this.keyWorkRanking[row.id] = []  // 每次请求创建唯一 哪行的数组 去接收对应的数组数据
                response.data.some((item,i) => {
                   循环遍历数组 <开始>
                  for (var key in item) {

                    this.keyWorkRanking[row.id].push({ // 将对应的数组数据添加到唯一对应的数组，在使用插槽给模板使用数据

                      keyword: key,heat: item[key][item[key].length-1].heat,rank: item[key][item[key].length-1].ranking + "," + 第" + item[key][item[key].length-1].position.split(")[0] + 页第1] + 位" 循环遍历数组 <结束>
                  console.log(this.keyWorkRanking",1)">this.keyWorkRanking)
                })

              }
            }

Template部分

<!--展开详情-->
      <el-table-column
        type=expand
        prop=expandGoods"
      >

        <template slot-scope="scope"> // 最外面table的插槽
          <el-row type=flex">
            <el-radio-group v-model=resent" size=small" @change=changeTime()">
              <el-radio-button label=24" type=success">最近24小时</el-radio-button>
              <el-radio-button label=168">最近7天</el-radio-button>
              <el-radio-button label=210">最近30天</el-radio-button>
              <el-radio-button label=420">最近60天</el-radio-button>
            </el-radio-group>
            <!--            &lt;!&ndash;日期&ndash;&gt;-->
            <!--            <el-row>-->
            <!--              <el-date-picker-->
            <!--                v-model=date"-->
            <!--                type=daterange"-->
            <!--                range-separator=-"-->
            <!--                start-placeholder=开始日期"-->
            <!--                end-placeholder=结束日期"-->
            <!--                class=competitionDate"-->
            <!--                value-format=timestamp"-->
            <!--                @change=dataChange()">-->
            <!--              </el-date-picker>-->
            <!--            </el-row>-->
            <!--            <el-button type=">导出数据</el-button>-->
            <!--            <el-select v-model=value" style=margin-left: 10px;">-->
            <!--              <el-option-->
            <!--                v-for=item in options"-->
            <!--                :key=item.value"-->
            <!--                :label=item.label"-->
            <!--                :value=">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </el-row>

                    <el-form label-position=center" inline demo-table-expandmargin-top: 10px;">
                      <el-table
                        :data="keyWorkRanking[scope.row.id]"  // 将接受数据时的唯一id作为这个数组的唯一标记
                        style=width: 100%;
                        color: #16223d;
                        font-size: 12px"
                        :header-cell-style={background:'#f8f9fa'}"
                        comGoodsExpand">
                        <!--关键词-->
                        <el-table-column
                          prop=keyword
                          label=关键词
                          align=
                          min-width=20%">
                          <template slot-scope=scope_t">
                            <el-col>
                              {{ scope_t.row.keyword }}
                            </el-col>
                          </template>
                        </el-table-column>
                        <!--热搜热度-->
                        <el-table-heatSearch搜索热度">
                            {{ scope_t.row.heat }}
                          </template>
                        </el-table-column>
                        <!--近24小时最新排名-->
                        <el-table-recentHours近24小时最新排名
                            {{ scope_t.row.rank }}
                          </template>
                        </el-table-column>
                        <!--排名走势-->
                        <el-table-trend排名走势"
                        >
                          <template slot-scope=">
                            <div ref=myChartwidth: 250px;height: 70px"></div>
                          </template>
                        </el-table-column>
                        <!--操作-->
                        <el-table-column
                          align=操作
                          prop=operates">
                          <el-link type=primaryfont-size: 12px" @click=rankingTrend()">排名走势</el-link>
                          <el-link type=padding: 0 7px;font-size: 12px">跳转</el-link>
                          <el-link type=">删除</el-link>
                        </el-table-column>
                      </el-table>
                    </el-form>
        </template>

      </el-table-column>


      <!--商品信息-->
      <el-table-column
        label=商品信息title
        min-width=40%"
      >

        <template slot-scope=scope">
          <div style=display: flex;align-items: center;">
            <a>
              <img :src=scope.row.src" scopeImage">
            </a>
            <div style=display: flex;flex-direction: column;">
              <span style=margin-left: 10px;color: #16223d;font-weight: 700">
                {{ scope.row.title }}
              </span>
              <span style=margin-left: 10px;color: #757575;
                父ASIN：{{ scope.row.parentsasin }}
              </span>
            </div>
          </div>
        </template>

      </el-table-column>
      <!--最新排名最高的关键词-->
      <el-table-最新排名最高的关键词tallest_keyword
        align=">
        <template slot-scope=">
          <!--<div>{{ scope.row.single_keyword? scope.row.single_keyword : '&#45;&#45;' }}</div>-->
          <div>最新排名:{{ scope.row.ranking ===666666? --' : scope.row.ranking }}</div>
          <div>位置:第{{ scope.row.position === 666666'? ' : scope.row.position }}页,第{{ scope.row.position ===
            ' : scope.row.position }}位
          </div>
        </template>
      </el-table-column>
      <!--添加时间-->
      <el-table-添加时间time10%">
      </el-table-column>
      <!--操作-->
      <el-table-operateadd">
          <el-button type=texttoTop(scope.$index)">置顶</el-button>
          <el-button type=addMainWord(scope.row.parentsasin)
            添加关键词
          </el-button>
          <el-button type=deleteGood(scope.row.parentsasin)">移除</el-button>
        </template>
      </el-table-column>