el-table里面存在固定列获取video的ref的时候无法获取原始DOM

最新推荐文章于 2024-05-09 18:58:22 发布
最新推荐文章于 2024-05-09 18:58:22 发布
阅读量512 收藏 9
点赞数 9
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44295184/article/details/135665076
版权

el-table里面存在固定列获取video的ref的时候无法获取原始DOM

问题复现

这是通过ref获取的dom实例，却变成了fixed固定出现了表格里面的video的实例
在这里插入图片描述

我现在的需求是修改里面的currentTime，但是获取的是固定列的video的ref，修改了，原始video也不会有任何变化

解决方法

创造一个变量控制fixed的固定列变化

<el-table-column label="操作" :fixed="caozuoFixed">

当video里面的 @loadedmetadata="setInitialTime"修改完数据，再变成fixed=“right”

如果有用，请给我点赞收藏，我会很开心，谢谢

立哥Sole
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
el-table加入无限滚动，并且可以控制列是否显示以及列的排序，不是网上大部分的json配置形式
解决el-table的$refs获取不到的问题（踩坑篇）
草巾冒小子的博客
08-31 5023
解决el-table的$refs获取不到的问题（踩坑篇）
vue3 element-plus中，el-dialog组件内，无法通过ref获得组件实例
hookind的博客
07-26 5410
vue3 element-plus中，el-dialog组件内，无法通过ref获得组件实例 。 对话框中的内容是懒加载的，这意味着在对话框打开之前，默认插槽（个人理解为el-dialog标签内的内容）不会被渲染到DOM上。因此，如果你需要执行一个DOM操作或通过ref访问组件，可在open事件回调中进行。经过测试，发现可以通过opened事件回调（open不行），可以访问el-dialog中组件的实例。...
Vue3--ref使用（解决ref无法获取dom元素的问题）
m0_67393828的博客
03-11 8028
众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响应式监听。.
Vue3使用ref获取dom元素
gurenchang的博客
08-10 1097
获取到对应的元素，但是在Vue3中，既没有this，也没有$refs，那么现在想获取dom元素，要怎么办呢？Vue3要获取dom还是要借助ref，同时还要借助生命周期。属性，然后在代码中通过this.$refs.xxx。Vue2中，可以通过给元素添加ref='xxx'中的元素还没挂载到页面上，所以必须在。原理如下：在Vue3中，
VUE3.0+TS用ref获取元素
weixin_51972964的博客
06-06 3265
<div ref="element" @click="handleClick">div元素</div> //在setup中无法使用this setup(){ //新建一个ref对象,对象命名必须与ref命名相同 //在setup的中还不是一个DOM节点类型,在DOM挂载后才会是ELEMENT类型,所以要设置泛型 const eleRef = ref<null | HTMLElement>(null) const handleClick = () => {
表格显示图片、查看附件
qq_43780814的博客
10-09 383
el-table-column(prop="enclosure" label="图片" align="center") template(slot-scope="scope") img(style="width: 30px;height: 30px;cursor: pointer;vertical-align: middle;" @click="lookFile(scope.row)" v-if="scope.row.enclosure[0]" :src="server.fileUrl + scop
Vue 动态设置audio/video的src 播放错乱问题
w710537643的博客
06-06 496
这是因为VUE对DOM更新是异步的 当我们改变src属性数据后，DOM上绑定的src属性没有立即更新，所以操作DOM可能会报错。为了保证能在更新完成后去操作可以使用 $nextTick。或者在标签上加上 v-if 重新加载标签。他保证在更新队列完成后去执行回调方法。
element ui的表格滚动效果
nuyoahso的博客
02-23 842
table事件：cell-mouse-enter 当单元格 hover 进入时会触发该事件cell-mouse-leave 当单元格 hover 退出时会触发该事件。
uni-app学习日记3
NLP工程化
11-06 1923
1.uni.request(OBJECT)中的success 解析：收到开发者服务成功返回的回调函数。如下所示： [1]data：Object/String/ArrayBuffer：开发者服务器返回的数据 [2]statusCode：Number：开发者服务器返回的HTTP状态码 [3]header：Object：开发者服务器返回的HTTP Response Header 2.uni.showMo...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 [email protected]，使用前请熟悉：[email protected]@2.12.0安装npm install --save el-table-infinite-...
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
scope.$index ：获取当前行的下标 scope.row：获取当前行的对象 效果图： 思路：通过点击事件将该对象在数组中的下标传递到方法中，然后对数组进行操作 即可根据下标删除数组中对应的对象。 补充知识：vue-...
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
徐同保的专栏
05-09 271
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 488
注释很详细，直接上代码……
Vue 传送门
最新发布
征战无悔人生
05-09 152
vue 传送门
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 385
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
el-table 固定第一列
12-14
为了固定el-table的第一列，可以使用el-table-column的fixed属性。将第一列的fixed属性设置为left即可实现固定第一列的效果。以下是一个示例代码： ```html <el-table :data="tableData"> <el-table-column ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值