最近遇到要实现一种类似于抖音排行榜的设计的需求，在表格中展示轮播图，在这里我简单写一下实现与踩坑点
坑点：
（1）记得在expand-change中再初始化一遍轮播图
（2）轮播图类名要动态渲染
代码实现
1.首先要安装swiper（最好安装5版本，高版本会有bug）
npm i swiper@5
2.main.js
import "swiper/css/swiper.css";
3.页面（组件）引入swiper并注册
import Swiper from "swiper";
4.html部分（重点：是在expand-change中重新初始化轮播图，每个轮播图的类名要动态渲染，且点击展开的时候初始化轮播图，动态渲染轮播图代码里也有实现）
<el-table
:data="hotRankList"
fit
v-loading="loading"
element-loading-text="拼命加载中"
@expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<div class="expand-cot">
<div
class="swiper-container"
:class="'swiper-container-' + scope.$index"
>
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(video, index) in scope.row.videoInfo"
:key="index"
@click="toPlay(video.shareUrl)"
>
<div class="img-cot">
<img :src="video.itemCover" alt="" />
<!-- 播放按钮 -->
<img
class="icon-play"
src="./images/icon-play.png"
alt=""
@click.stop="toPlay(video.shareUrl)"
/>
</div>
<div class="desc">{
{
video.title }}</div>
</div>
</div>
</div>
<div
class="swiper-button-next"
v-show="scope.row.videoInfo.length > 10"
:class="'swiper-button-next-' + scope.$index"
></div>
<div
class="swiper-button-prev"
v-show="scope.row.videoInfo.length > 10"
:class="'swiper-button-prev-' + scope.$index"
></div>
</div>
</template>
</el-table-column>
<el-table-column label="排名" align="left">
<template slot-scope="scope">
<div class="rank">
<div class="rank-left">{
{
scope.row.rank }}.</div>
<div class="rank-right">
<img
v-if="scope.row.rankChange > 0"
src="./pc/hot-topic/img/up-icon.png"
alt=""
/>
<img
v-if="scope.row.rankChange < 0"
src="./pc/hot-topic/img/down-icon.png"
alt=""
/>
<div class="number">
{
{
scope.row.rankChange && scope.row.rankChange != 0
? Math.abs(Number(scope.row.rankChange))
: ""
}}
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="头像/用户名" align="left">
<template slot-scope="scope">
<div class="user-name">
<img :src="scope.row.avatar" alt="" />
<div>{
{
scope.row.nickName }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="粉丝数" prop="followerCount" align="left">
<template slot-scope="scope">
<div class="fans-num">{
{
scope.row.followerCount | dataFilter}}</div>
</template>
</el-table-column>
<el-table-column
label="近一个月在榜数"
prop="onBillboardTimes"
align="left"
>
<template slot-scope="scope">
<div>{
{
scope.row.onBillboardTimes }}</div>
</template>
</el-table-column>
<el-table-column label="影响力指数" align="right">
<template slot-scope="scope">
<div>{
{
scope.row.effectValue | dataFilter}} 影响力</div>
</template>
</el-table-column>
</el-table>
5.js部分（写在method中）
expandChange(row, a) {
let index = this.hotRankList.findIndex((item) => row.id == item.id);
this.$nextTick(() => {
this.swiperInit(index);
});
},
swiperInit(index) {
new Swiper(".swiper-container-" + index, {
loop: false,
mousewheel: false,
keyboard: true,
observer: true, // 轮播图在display：none;属性的元素下，加上这个才能进行初始化
observeParents: true,
slidesPerView: 10,
spaceBetween: 18,
slidesPerGroup: 10,
loopFillGroupWithBlank: true,
navigation: {
nextEl: ".swiper-button-next-" + index,
prevEl: ".swiper-button-prev-" + index,
},
});
},