V-for渲染出现了问题

img


img


在用,v-for渲染的时候,导致每一条歌曲播放源都渲染出了15种 所以点击播放按钮的时候,总是播放的是第一首。

你的列里面的数据不需要去遍历,就取当前的音频数据源就好了,用slot把当前行的相应数据取到,放到::src里面就可以,具体细节请私聊我,因为一句两句说不清楚😂😂😂

改成下面的试试,我是用的vue3, elementUI Plus的,如果是vue2.x + ElementUI, 代码可能稍微有些差异

<el-table-column label="播放暂停" width="100">
   <template #default="scope">
      <audio ref="audio" controls :src="`https://anime-music-files.jijidown.com/${scope.row.id}_128.mp3?t=${scope.row.atime}`">
      <i class="el-icon-video-play fun " @click="handlePlay"></i>
      <i class="el-icon-video-pause fun " @click="handlePause"></i>
   </template>
</el-table-column>