element table表格滚动条错位问题

最新推荐文章于 2024-07-23 15:23:30 发布
最新推荐文章于 2024-07-23 15:23:30 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43886711/article/details/104776637
版权
本文主要介绍了如何解决使用Element UI时遇到的表格滚动条错位问题，提供两种解决方案：一是通过权重调整之前的样式，这可以通过在入口的index.css或App.vue中添加特定样式实现；二是通过缩小表格宽度来避免滚动条错位。
摘要由CSDN通过智能技术生成

1.用权重改变之前的样式
放在入口 index.css 或者App.vue

body .el-table th.gutter{
   
  display: table-cell !important;
}
body .el-table colgroup.gutter{
   
  display: table-cell !important;
}

2.缩小table

// <el-table :data="list" ref="mutipleTable"></el-table>
最低0.47元/天 解锁文章
李芦儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element的el-table中记录滚动条位置的示例代码
10-16
在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常情况下，直接通过JavaScript的`scrollTop`属性赋值来控制滚动条位置，这种方法简单直接。但在一些特定的场景下，例如在...
el-table 固定表头和固定列之后 由于滚动条导致的 表格线错位
qq_45915537的博客
07-05 2913
table 直接调用tabelRevise函数即可 tableRevise(this.$refs.dirctTable.$el) //修正el-table错位 function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.que...
el-table横向滚动时，表头与列错位
qq_41838435的博客
06-29 2453
el-table横向滚动时，表头与列错位
Element-ui el-table 表格 fixed 固定导致表格滚动窜行错位的解决方法
最新发布
qq_42101569的博客
07-23 527
el- table 对表格列项设置fixed 左右固定列的时候,移动滚动条到页面底部会出现表头和内容错位或者是固定列的内容错位的情况。
解决el-table滚动条错位问题（完美级）
Lora_0925的博客
04-20 5972
滚动条 创建一个js文件，并在main.js引入: import Vue from "vue"; Vue.directive("tableFit", { //指令所在组件的 VNode 及其子 VNode 全部更新后调用。 componentUpdated(el, binding, vnode) { setTimeout(() => { adjustColumnWidth(el, vnode); }, 0) },
elementUI 表格滚动条样式修改（获取类名）
qq_42031498的博客
09-09 1701
elementUI 中 el-table 滚动条的class是.el-table__body-wrapper::-webkit-scrollbar 其中可以细致到左中右三段滚动条，那么在上面再加上这个类 左：is-scrolling-left 中：is-scrolling-middle 右： is-scrolling-right 这个需要写到style标签中，不能加作用域才能生效，然后为了不影响其他组件，在前面加个我当前组件父级的类my-class 也不要加预编译，我加上lang=scss 后出现了其他页面
elementui table 在jsp页面中横向滚动条的问题
fanr639的博客
07-19 1228
问题描述 在jsp中使用elementUI中的table；没有固定列，但是横向滚动条没有，写了多个页面，同样的样式同样的布局同样的table，不同就是数据列还有table的操作事件，但是有的能够出来，有的就出不来。 我遇到的现在能够解决的有两种方式。 解决 解决一：在页面中通过缩小放大页面大小，在缩小到一定的比例后能够出来横向滚动条，但是正常的时候在不给table设置高度的时候能够正常显示横向滚动条的； 增加样式：width: 100%; overflow: inherit;后可以出来 解决二：在页面怎么调
selenium之 如何控制网页内嵌div中滚动条的滚动
春天的波菜
04-01 5856
项目过程当中遇到操作滚动条问题： 这里是浏览器内嵌的横向滚动条，页面有2个TAB, 这里主要是操作TAB2里面的横向滚动条，下图可以看出class=el-table__body-wrapper is-scrolling-left 2个tab 那么操作第2个tab ，横向滚动到右侧，代码如下 js = 'document.getElementsByClassName("e...
监听element-ui table滚动事件的方法
10-17
本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更多数据。 ### 背景 在大数据展示场景中，为了提高页面性能和用户体验，通常会采用分页或无限滚动的方式来加载数据。...
vue element-ui table表格滚动加载方法
08-27
Vue Element-UI 表格滚动加载方法 在本文中，我们将探讨使用 Vue 和 Element-UI 实现表格滚动加载的方法。本方法可以帮助开发者实现表格的无限滚动加载，提高用户体验。 一、添加全局注册事件 在实现表格滚动加载...
elementUI中Table表格问题的解决方法
12-12
在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。 1.表格样式问题： 混乱样式.png 正常样式.png 如上图，在当前导航表格table样式是没问题的，但当我点击别的...
el-table横向滚动条不显示
找师父的小白的博客
05-16 2758
在Vue中使用el-table，设置表格高度和宽度后，表格内容超出，横向滚动条没有显示，无法拖动。
element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示
ccbwc的博客
03-27 1200
就是在el-table里加style="min-width: calc(100%-10px);" 给一个style就行了说是emmmm。后来想着找chat gpt问问，直接给出简单的答案，我试了以下，没想到居然行了emmmmm。这几天被这个问题困惑很久，找了别的大佬改样式直接把滚动条固定，但我自己一直没试成功。这是我自己的一个问题，不知道能不能帮助大家，可以试试。
已解决：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示
felicity_zll的博客
05-16 5682
记录一下在项目中遇到的问题，困扰了几天最终解决了。 一、问题：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示。 1、首次进入的效果 可以看到滚动条并没有渲染出来，但是刷新页面或者改变窗口大小。又会出现。 最后一点点查看DOM元素、发现了问题： 这是无滚动条首行最后一个单元格：； 这是又有滚动条首行最后一个单元格：； 然后再改下这个属性： 二、解决 直接在css中添加： //显示滚动条 /deep/ .el-table--scrolla
css距离顶部高度_使用vue实现ElementUI中的Backtop回到顶部
weixin_39526872的博客
11-20 420
一、前言elementUI有说明文档，但我为什么还要重新写一下呢？因为文档也有坑，一开始使用时你复制进去，可能都没有效果。也不知道原因在哪，就如Backtop回到顶部的组件，不去看源码，真心不知道是怎么个所以然。一开始，我把这个组件放到我页面的底部，结果是无效果的，而且还会报css的这两个样式错误(.page-component__scroll .el-scrollbar__wrap)，看完这个文...
el-table横向滚动条不失效问题，页面缩小滚动条不展示
wtta.
02-27 629
el-table横向滚动条不失效问题，页面缩小滚动条不展示
elementUI中固定列，导致横向滚动条失效
aliven1的博客
09-30 760
elementUI中固定列，导致横向滚动条失效
利用css解决el-table__fixed，el-table__fixed-right遮挡底部滚动条区域的问题
weixin_43020925的博客
05-05 1114
是必定在**.is-scrolling-xxx**,或者**.el-table__fixed**后面的，所以就有办法使用css选中它了，还不会影响不出现浮动时的高度区域情况。后，右侧操作栏区域总是会遮挡底部滚动条区域，只有浏览器窗口变动后高度才会正确，后面开了控制台，发现是el-table__fixed-right计算的高度有问题，观察后发现。最近有个vue2的老项目要维护，elementui总是有很多莫名其妙的bug，最近突然发现el-table 操作栏区域使用了。
elementUI表格el-table错位问题(fixed=“right“)
money-k的博客
03-18 8241
问题描述： 在使elementUI表格 使用fixed属性时，只要打开F12再关闭即出现表格错位问题，使用fixed=“right“出现了错位的情况 正常情况： 错位情况： 大多数解决方式： 1.在获取数据的时候使用el-table的doLayout方法 2.加全局样式 .el-table__fixed-right{ height: 100% !important; } 这里没用使用以上方式 原因：由于左侧字段设置了宽度导致该问题 width:不能仅写200 应该为200px 问题得到
vue3Element-ui中el-table添加了竖向滚动条使用横向滚动条出现错位的问题
09-21
在使用Element-ui的el-table组件中，如果同时添加了竖向滚动条和横向滚动条，可能会出现错位的问题。这是因为竖向滚动条会占据一定的宽度，导致横向滚动条的位置不正确。 解决这个问题的方法是使用CSS样式来调整滚动条的位置。可以使用以下代码： ```css .el-table__body-wrapper::-webkit-scrollbar { width: 6px; /* 设置滚动条的宽度 */ } .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ccc; /* 设置滚动条的颜色 */ } .el-table__body-wrapper::-webkit-scrollbar-track { background-color: #f5f5f5; /* 设置滚动条的背景色 */ } ``` 将以上代码添加到你的样式文件中，然后给el-table组件添加一个class，例如：`scrollable-table`。然后在el-table组件上添加该class，即可修复错位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值