vue使用elementui 的table组件，每一行都能播放音频，翻页后播放的还是上一页对应行的音频

Question

使用elementui 的table组件播放音频，翻页后播放的还是第一次的内容

源码如下：

<template>
  <div >
    <head-top></head-top>
    <div class="table_container">
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%" :cell-style="cell">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          property="title"
          label="标题"
          width="150">
        </el-table-column>
        <el-table-column
          property="author"
          label="作者"
          width="80">
        </el-table-column>
        <el-table-column
          property="dynasty"
          label="朝代"
          width="80">
        </el-table-column>
        <el-table-column
          property="scores"
          label="评分"
          width="80">
        </el-table-column>
        <el-table-column
          property="tag"
          label="标签"
          width="250">
        </el-table-column>
        <el-table-column
          property="operate"
          label="操作">
          <template slot-scope="scope">
            <router-link :to="{ name: 'num', params: { id: scope.row.id }}" target="_blank">
              <el-button size="mini"><i class="el-icon-view"></i></el-button>
            </router-link>
            <el-button
              size="mini"
              type="primary"
              v-show="scope.row.audiourl"
              @click="play(scope.$index, scope.row)"><i class="iconfont icon-play"></i>
              <audio :id="scope.row.audiourl"><source :src="scope.row.audiourl"  type="audio/mpeg" /></audio>
              </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleRecommend(scope.$index, scope.row)"><i class="el-icon-success"></i></el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '/components/headTop'
import axios from 'axios'
import { Loading } from 'element-ui'
export default {
  data () {
    return {
      tableData: [],
      currentPage4: 1,
      limit: 10,
      total: 100,
      icon: '',
      audio: ''
    }
  },
  created () {
    this.getPages()
  },
  components: {
    headTop
  },
  methods: {
    getPages () {
      let loadingInstance = Loading.service({ fullscreen: true, text: '加载中' })
      axios.get('/v1/gushiwen/selectByScores?pageNum=' + this.currentPage4 + '&pageSize=' + this.limit).then((response) => {
        if (response.status === 200) {
          this.tableData = response.data.list
          this.total = response.data.total
          for (let i of this.tableData) {
            if (i.audiourl == null || i.audiourl === '') {
              i.audiourl = false
            } else {
              i.audiourl = 'https://img.nichuiniu.cn/mp3/' + i.audiourl
            }
          }
          loadingInstance.close()
        }
      }).catch(function (err) {
        console.error(err)
      })
    },
    handleSizeChange (val) {
      this.limit = val
      this.getPages()
      if (this.audio !== '') {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
    },
    handleCurrentChange (val) {
      this.currentPage4 = val
      this.getPages()
      if (this.audio !== '') {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
    },
    cell ({row, column, rowIndex, columnIndex}) {
      return 'padding:4px 0'
    },
    play (index, row) {
      // 将正在播放的暂停
      if (this.audio !== '' && this.audio !== document.getElementById(row.audiourl)) {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
      this.audio = document.getElementById(row.audiourl)
      this.icon = document.getElementById(row.audiourl).previousElementSibling
      if (this.audio.paused) {
        this.audio.play()
        this.icon.className = 'iconfont icon-zanting'
      } else {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
    }
  }
}
</script>

如果在每次执行getpage方法之前，先就不会重复播放音频，代码如下：

<template>
  <div >
    <head-top></head-top>
    <div class="table_container">
      <el-table
        :data="tableData"
        highlight-current-row
        style="width: 100%" :cell-style="cell">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          property="title"
          label="标题"
          width="150">
        </el-table-column>
        <el-table-column
          property="author"
          label="作者"
          width="80">
        </el-table-column>
        <el-table-column
          property="dynasty"
          label="朝代"
          width="80">
        </el-table-column>
        <el-table-column
          property="scores"
          label="评分"
          width="80">
        </el-table-column>
        <el-table-column
          property="tag"
          label="标签"
          width="250">
        </el-table-column>
        <el-table-column
          property="operate"
          label="操作">
          <template slot-scope="scope">
            <router-link :to="{ name: 'num', params: { id: scope.row.id }}" target="_blank">
              <el-button size="mini"><i class="el-icon-view"></i></el-button>
            </router-link>
            <el-button
              size="mini"
              type="primary"
              v-show="scope.row.audiourl"
              @click="play(scope.$index, scope.row)"><i class="iconfont icon-play"></i>
              <audio :id="scope.row.audiourl"><source :src="scope.row.audiourl"  type="audio/mpeg" /></audio>
              </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleRecommend(scope.$index, scope.row)"><i class="el-icon-success"></i></el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '/components/headTop'
import axios from 'axios'
import { Loading } from 'element-ui'
export default {
  data () {
    return {
      tableData: [],
      currentPage4: 1,
      limit: 10,
      total: 100,
      icon: '',
      audio: ''
    }
  },
  created () {
    this.getPages()
  },
  components: {
    headTop
  },
  methods: {
    getPages () {
      this.tableData = []
      let loadingInstance = Loading.service({ fullscreen: true, text: '加载中' })
      axios.get('/v1/gushiwen/selectByScores?pageNum=' + this.currentPage4 + '&pageSize=' + this.limit).then((response) => {
        if (response.status === 200) {
          this.tableData = response.data.list
          this.total = response.data.total
          for (let i of this.tableData) {
            if (i.audiourl == null || i.audiourl === '') {
              i.audiourl = false
            } else {
              i.audiourl = 'https://img.nichuiniu.cn/mp3/' + i.audiourl
            }
          }
          loadingInstance.close()
        }
      }).catch(function (err) {
        console.error(err)
      })
    },
    handleSizeChange (val) {
      this.limit = val
      this.getPages()
      if (this.audio !== '') {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
    },
    handleCurrentChange (val) {
      this.currentPage4 = val
      this.getPages()
      if (this.audio !== '') {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
    },
    cell ({row, column, rowIndex, columnIndex}) {
      return 'padding:4px 0'
    },
    play (index, row) {
      // 将正在播放的暂停
      if (this.audio !== '' && this.audio !== document.getElementById(row.audiourl)) {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
      this.audio = document.getElementById(row.audiourl)
      this.icon = document.getElementById(row.audiourl).previousElementSibling
      if (this.audio.paused) {
        this.audio.play()
        this.icon.className = 'iconfont icon-zanting'
      } else {
        this.audio.pause()
        this.icon.className = 'iconfont icon-play'
      }
    }
  }
}
</script>

上面两段代码唯一的区别就是在请求之前有没有设置,不知何解

this.tableData = []

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

你用audiourl赋给audio的id，有没有考虑audiourl为空的情况。
我觉得你的音频播放那里代码应该这样写，把索引赋给id，前面加字母，这样每个audio都是唯一的

<el-button
size="mini"
type="primary"
v-show="scope.row.audiourl"
@click="play(scope.$index, scope.row)"><i class="iconfont icon-play"></i>
<audio :id="'audio'+scope.$index"><source :src="scope.row.audiourl"  type="audio/mpeg" /></audio>
</el-button>

获取audio的时候，传入索引index，直接document.getElementById('audio'+index)，播放的时候就用这个audio播放
至于翻页之后播放还是上一页的，说明src是一样的，可能需要把src覆盖一下

Answer 2

遇到同类问题：解决方法就是将
<audio :id="'audio'+scope.$index"><source :src="scope.row.audiourl" type="audio/mpeg" /></audio>
修改为：<audio :id="'audio'+scope.$index" :src="scope.row.audiourl" type="audio/mpeg" /></audio>
这样就能在播放第二页的音频时正常播放