vue中操作dom，隐藏table中的滚动条

最新推荐文章于 2025-03-05 11:18:02 发布
最新推荐文章于 2025-03-05 11:18:02 发布
阅读量1.4k 收藏
点赞数
分类专栏： HTML 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20984609/article/details/116517942
版权
在Vue中使用ElementUI的table组件时遇到滚动条显示问题。尝试通过/deep/修改样式无效，直接操作DOM在mounted生命周期内无法获取到元素。最终通过setTimeout解决，发现table列可能在DOM渲染后期生成。同时疑惑于el-table-column和span标签间多出的div层，限制了样式操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用elementUI table组件时，单元格内出现了滚动条。

目的：隐藏滚动条。原本想的是通过/deep/穿透去覆盖原始css属性，但是不生效，或者生效后等级低不能覆盖原属性。

然后想通过操作DOM设置style样式，这样等级最高。就遇到了在mounted周期内，通过document.getElementsByClassName()或document.querySelector()获取元素节点，通过console.log()输出是能看到有数据的，但是document.getElementsByClassName('fengxian')[0]去取数据则是undefined。

后来用了this.$nextTick(()=>{}),也不行，后来增加setTimeout解决了。然后输出的数据是这样的：

在操作dom时，table列难道还没有生成？

 

代码：

mounted() {

      this.$
最低0.47元/天 解锁文章
element的el-table中记录滚动条位置的示例代码
10-16
在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常情况下，直接通过JavaScript的`scrollTop`属性赋值来控制滚动条位置，这种方法简单直接。但在一些特定的场景下，例如在...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
在 Vue 和 ElementUI 中实现滚动懒加载主要涉及以下知识点： 1. **Vue 数据绑定与组件化**： Vue 的核心特点是数据驱动视图，通过 `data` 定义状态，然后在模板中使用 `v-bind` 或简写 `:` 将数据绑定到元素上。...
vue 隐藏el-table的滚动条
kgdtl的博客
08-26 5956
在vue文件内加上以下代码 <style lang="scss"> .el-table__body-wrapper::-webkit-scrollbar { /*width: 0;宽度为0隐藏*/ width: 0px; } .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 2px; height: 50px; backgrou
隐藏table的滚动条
m0_58361435的博客
11-14 922
【代码】隐藏table的滚动条。
全局隐藏滚动条情况下，手动设置el-table的滚动条显示
最新发布
Jean_yuanyuan的博客
03-05 252
el-table需要展示滚动条，按如下方式设置。因项目需要，全局隐藏了滚动条。
vxe-table固定列遮挡滚动条
x_iao_s的博客
02-09 1418
scss穿透进去把浮动的高度减少一点把滚动条露出来就可以了具体自己个控制、我来提供一个思路.vxe版本3.6.9。
el-table隐藏右边滚动条
yujiabao702的博客
04-04 1494
类型二：不给 height 属性,不会固定表头。类型一：有 height 属性,会固定表头。需求：隐藏表格右边的滚动条。
隐藏滚动条
m0_47659279的博客
03-28 142
1.使用element::-webkit-scrollbar选中元素的滚动条 2.设置其样式为display：none即可 例如要隐藏body的滚动条可以这样写： body::-webkit-scrollbar{ display: none; }
vue使用keep-alive保持滚动条位置的实现方法
10-17
3. 在全局路由守卫router.beforeEach中，拦截路由跳转，从即将离开的页面的DOM元素中获取当前滚动条的位置，并将其保存在路由的meta对象中： ```javascript router.beforeEach((to, from, next) => { if (from....
element-ui 中的table的列隐藏问题解决
12-12
因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列可以方便的看见比较重要的几列的内容。用之前的方法的话，非常简单，直接设置display的显示和隐藏就可以了。 但是放在element-ui中来就...
Element中el-table组件右侧空白隐藏-滚动条
大山博客
11-23 2148
固定table高度时，出现滚动条，我们希望隐藏滚动条，或修改滚动条样式，出现table右边出现15px 的固定留白。
vxe-table固定表头同时不显示滚动条，粘性定位sticky
m0_56309928的博客
09-20 693
思路就是给表头的th加粘性定位，同时要一个一个的排查它的父元素有没有overflow：hidden，要改成visible，但是研究了很久都不生效。想要表头固定同时表格还不能有滚动条，所以用vxe-table自带的固定表头无法实现，所以考虑使用css的粘性定位实现。
table基础学习-行列布局和滚动条隐藏
qq_53145332的博客
08-27 2019
可视化类型页面制作心得----table table 表格类型的数据 ​ 要写可视化很少会少得了表格的参与，第一次写云子可视化的时候就直接用div堆了一个表格出来，效果不尽人意 … 一．表格元素总汇 表格的基本构成最少需要三个元素：、、，其他的一些作为可选辅 助存在。 也是最常用的三个元素 元素名称 说明 table 表示表格 thead 表示标题行 tbody 表示表格主体 tfoot 表示表脚 tr 表示一行单元格 th 表示标题行单元格 td 表
vue 设置和隐藏滚动条
淘气の小狼人的博客
12-02 4193
vue 设置和隐藏滚动条
html表格隐藏并添加滚动条,让table带下滚动条(部分隐藏td的)横向的
weixin_30969479的博客
06-09 952
让table带上滚动条(部分隐藏td的)横向的---隐藏table 的tbody部分右侧的部分列(模仿别人代码写的，性能有点低)$(function(){var table = $('table.maintable1').each(function(){var $table = $(this).css('border-collapse','collapse');var $tbody = $tabl...
el-table隐藏滚动条
jyn15159的博客
05-04 1904
el-table隐藏滚动条
滚动条隐藏的dom滚动到当前视图的功能实现复盘
weixin_45392774的博客
08-28 245
滚动条隐藏的dom滚动到当前视图的功能实现复盘
element 隐藏表格的滚动条
qq_44183995的博客
01-14 815
【代码】element 隐藏表格的滚动条。
VUE enement-ui之table表格隐藏滚动条
HanXiaoXi_yeal的博客
08-06 4255
只需修改样式即可： /deep/.el-table__body-wrapper::-webkit-scrollbar{ width: 0; } 注意：element-ui表格很多样式修改都需要加深度穿透才能生效。 效果图：
改变ant design vue table的滚动条
06-08
首先，你需要找到 Ant Design Vue Table 组件中的滚动条所在的 DOM 元素，可以使用浏览器的开发者工具来查看。 然后，可以使用如下 CSS 样式来修改滚动条样式： ``` /* 修改滚动条轨道的颜色 */ .ant-table-body::...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值