网站制作前景杯子软文营销300字

BUG描述

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

 <el-table-columnheader-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>