当前位置: 首页 > news >正文

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

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>
http://www.lryc.cn/news/340112.html

相关文章:

  • 【JavaSE】你真的了解内部类吗?
  • Vue3(二):报错调试,vue3响应式原理、computed和watch,ref,props,接口
  • 前端console用法分享
  • Matlab|电价型负荷需求响应(考虑电价变化)
  • PySide QWebChannel实现Python与JS双向通信的前后端分离桌面应用
  • 清明三天,用Python赚了4万?
  • 【C/C++笔试练习】read函数、虚拟存储、用户态、线程特点、缺页处理、调度算法、进程优先级、锁的使用、创建进程、不用加减乘除做加法、三角形
  • 设计模式(021)行为型之访问者模式
  • Linux中磁盘的分区,格式化,挂载和文件系统的修复
  • Android retrofit
  • 【C++风云录】五款 C++ 库的探索与应用:物联网、嵌入式与数据处理
  • Qt_30道常见面试题及答案
  • 【vue】v-model 双向数据绑定
  • C#创建磁性窗体的方法:创建特殊窗体
  • Gateway 基本配置指南:构建高效的网络接入网关
  • 自定义类型: 结构体 (详解)
  • 设计模式(23):访问者模式
  • 【C++】类和对象③(类的默认成员函数:拷贝构造函数 | 赋值运算符重载)
  • 掀起区块链开发狂潮!Scaffold-eth带你一键打造震撼DApp
  • 【Qt 学习笔记】Qt常用控件 | 按钮类控件Check Box的使用及说明
  • android gradle 配置远程仓库
  • 第十二章 OpenGL ES 基础-色温、色调、亮度、对比度、饱和度、高光
  • 力扣经典150题解析之二十八:盛最多水的容器
  • Rockchip Android13 Vold(二):Framework层
  • Oracle数据库故障类别及日常运维规划策略
  • 电商技术揭秘九:搜索引擎中的SEO数据分析与效果评估
  • 多线程传参以及线程的优缺点
  • keil创建单片机工程
  • QT 串口助手 学习制作记录
  • Github 2024-04-13 Rust开源项目日报Top10