【vue+python】 Vue列表展开渲染，解决共用一个数组，导致展开列表数组数据复用
- 2020 年 3 月 26 日
- 筆記
解决思路：展开的列表设置成为一数组，一行列表数据使用唯一数组
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="width: 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="width: 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>
