解决思路：展开的列表设置成为一数组，一行列表数据使用唯一数组
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>
<!-- <!–日期–>-->
<!-- <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 : '--' }}</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>