【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] + "页第" + item[key][item[key].length-1].position.split(",")[1] + "位",
                    })
                  }
                  // 循环遍历数组 <结束>
                  console.log("this.keyWorkRanking",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="success" size="small">导出数据</el-button>-->
            <!--            <el-select v-model="value" size="small" style="margin-left: 10px;">-->
            <!--              <el-option-->
            <!--                v-for="item in options"-->
            <!--                :key="item.value"-->
            <!--                :label="item.label"-->
            <!--                :value="item.value">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </el-row>

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

      </el-table-column>


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

        <template slot-scope="scope">
          <div style="display: flex;align-items: center;">
            <a>
              <img :src="scope.row.src" class="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-column
        label="最新排名最高的关键词"
        prop="tallest_keyword"
        align="center"
        min-width="20%">
        <template slot-scope="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 ===
            '666666'? '--' : scope.row.position }}位
          </div>
        </template>
      </el-table-column>
      <!--添加时间-->
      <el-table-column
        label="添加时间"
        prop="time"
        align="center"
        min-width="10%">
      </el-table-column>
      <!--操作-->
      <el-table-column
        label="操作"
        align="center"
        prop="operate"
        min-width="20%">
        <template slot-scope="scope" ref="add">
          <el-button type="text" style="font-size: 12px" @click="toTop(scope.$index)">置顶</el-button>
          <el-button type="text" style="padding: 0 7px;font-size: 12px" @click="addMainWord(scope.row.parentsasin)">
            添加关键词
          </el-button>
          <el-button type="text" style="font-size: 12px" @click="deleteGood(scope.row.parentsasin)">移除</el-button>
        </template>
      </el-table-column>