解决思路:展开的列表设置成为一数组,一行列表数据使用唯一数组
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> <!-- <!–日期–>--> <!-- <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 : '--' }}</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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。