【BUG】element-ui表格中使用video标签，数据翻页，video中的视频仍然显示第一页的视频，没有重新加载

BUG描述

遇到一个问题，使用element-ui构建的管理端后台，表格里面每一行都有一个video标签，里面有视频，当我翻页了以后，视频不会重新加载，仍然显示的是第一页的视频，代码如下：

 <el-table-column
        header-align="center"
          align="center"
          label="视频"
          width="220px">
      <template slot-scope="scope">
          <video controls width="200" height="150" :poster="scope.row.cover">
              <source :src="scope.row.vidioUrl" type="video/mp4">
          </video>
      </template>
  </el-table-column>

解决方法

使用 vue中的key 特性，在 标签上添加一个动态 key 属性，使其与当前行数据关联。这有助于 Vue.js 更准确地跟踪每个视频组件的状态，确保在翻页时重新渲染视频元素。

<video controls width="200" height="150" :poster="scope.row.cover" :key="scope.row.id">
    <source :src="scope.row.vidioUrl" type="video/mp4">
</video>