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)
})
}
}
<!--展开详情-->
<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>