elementui的横向滚动_elementUi的el-table横向滚动条始终位于可视区域

最新推荐文章于 2024-09-06 16:14:56 发布
最新推荐文章于 2024-09-06 16:14:56 发布
阅读量4.9k 收藏
点赞数
文章标签： elementui的横向滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39941792/article/details/111862639
版权
本文介绍如何使ElementUI的el-table组件在数据过多时，横向滚动条始终显示在可视区域。通过使用v-perfect-scrollbar，设置样式隐藏滚动条并监听滚动事件，实现在页面滚动时，表格滚动条位置的自动调整，确保其可见。
摘要由CSDN通过智能技术生成

获取数据

v-perfect-scrollbar

border

resizable

:data="tableData">

{ { scope.row.column_1 }}

{ { scope.row.column_2 }}

{ { scope.row.column_3 }}

{ { scope.row.column_4 }}

{ { scope.row.column_5 }}

{ { scope.row.column_6 }}

{ { scope.row.column_7 }}

{ { scope.row.column_8 }}

{ { scope.row.column_9 }}

{ { scope.row.column_10 }}

{ { scope.row.column_11 }}

{ { scope.row.column_12 }}

export

default {

data() {

return {

tableData:[]

}

},

methods: {

getData() {

var len = this.tableData.length

var i = 0;

while (i < 50) {

var bz = len + i;

this.tableData.push({

column_1: "第1-" + bz + "行的数据",

column_2: "第2-" + bz + "行的数据",

column_3: "第3-" + bz + "行的数据",

column_4: "第4-" + bz + "行的数据",

column_5: &

最低0.47元/天 解锁文章
weixin_39941792
关注
element ui的table组件横向滚动条始终位于可视区域
qq_56162766的博客
04-19 3813
element ui的table组件横向滚动条始终位于可视区域
工作日志：el-table在无数据情况下，出现横向滚动条。
最新发布
嫒薇笑的博客
09-25 676
给.el-scrollbar加了一个边框后，发现有数据的时候table右侧的边框多了一层；无数据的时候，右侧body部分没有边框，滚动条出现，滚动到最右侧，边框才出现。说明给el-scrollbar加边框是有问题的，果断去掉。原因：中的组件不能呈现动画的非元素根节点。也就是说，Transition包裹的必须是一个单根的组件。2、el-table在无数据情况下，出现横向滚动条，大概跟边框的设置有关系。
el-table实现当内容过多时，el-table显示滚动条，页面不显示滚动条
weixin_47970316的博客
09-06 1011
【代码】el-table实现当内容过多时，el-table显示滚动条，页面不显示滚动条。
el-table横纵向滚动条固定在可视屏幕内，并自适应分辨率（2.0）
qq_67447855的博客
03-09 1430
在不同分辨率，视窗不同大小的环境下 table都会在视窗中，且外层视窗不会出现滚动条。
Element-UI组件之导航Navigation
TwentyOne__的博客
07-04 4213
Element-UI组件之导航NavigationNavMenu 导航菜单顶栏侧栏折叠Tabs 标签页基础用法 NavMenu 导航菜单 顶栏 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item ...
elementplus 中el-table横向滚动条始终位于可视区域
qq_39536826的博客
07-26 477
elementplus 中el-table横向滚动条始终位于可视区域
elementui el-table 横向滚动条保持在可视范围中
Lazy_Sleep的博客
02-06 6338
实现效果 当列表内容部分可见时，保持横向滚动条在下方。 实现 原理 这里涉及到两个Dom元素，类名分别为 el-table__body-wrapper、el-table__body 通过观察发现横向滚动条在于el-table__body-wrapper上，el-table__body则是实际的列表内容，当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 因此只需要动态的修改el-table__body-wrapper的height即可实现想要的效果。
element el-table实现可进行横向拖拽滚动
我总是词不达意的博客
12-28 5905
el-table左右拖动，element el-table实现可进行横向拖拽滚动
Vue进阶（幺幺玖）：element-ui table组件适应性问题（横向滚动条）
IT全栈 华强工作室
05-29 6711
在开发前端项目过程中，解决适配性、兼容性问题是经常遇到且费事费力的苦差事，尤其是在开发Vue项目，应用部署在IE（尤其是IE9）上的时候。 在进行动态展示（根据后台返回的表头、表数据展示）搜索结果时，会遇到搜索结果适配屏幕宽度或高度，但是却会出现纵向或横向滚动条的现象，通过F12调试页面元素，会发现动态的增删overflow:auto元素属性，会解决以上问题。由此可知，动态渲染页面元素时，页面加载之前，由于页面元素尚未完全加载计算元素属性值结束，会造成屏幕出现不适配，即会出现横向纵向滚动条的问题，现在的解决
element table滚动条固定视图底部
xuanyuan_jia的博客
06-08 2628
问题： 使用elementui做表格的时候，发现内容超出浏览器宽度，table出现滚动条，但是滚动条一直固定在表格最下面，查看右边需要滚动到底部再拉动横向滚动条，所以固定横向滚动条在页面底部。 解决方案： //1.css控制 //2. 自制滚动条（未完成 html: <div class="taberContainer" @contextmenu.prevent.capture> <el-table :data="excelData" tooltip-effect="dark
vue element-ui表格的滚动条样式修改
weixin_43829905的博客
12-30 7577
vue element-ui表格的滚动条样式修改 默认element-ui table固定表头或列时，当表列过多出现滚动时，滚动条效果如下，效果不是很好看（个人感觉） 修改前效果： 修改后效果： 满意度加加 直接加全局代码样式修改就可以了 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ background-color: white;
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
热门推荐
D浩DzD的博客
09-30 1万+
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王佳斌
07-14 2716
iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2 iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动
Element UI中的table组件添加横向滚动条
Web_chicken的博客
08-27 1万+
如何给Element UI中的table组件添加横向滚动条 并非是浏览器自带滚动条样式，而是类似于Element滚动条样式 话不多说直接上代码 .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ } .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 10px; /*
vue滚动条一直显示
qq_30351747的博客
10-09 1849
vue滚动条一直显示 使用el-scrollbar 不用鼠标移入才显示滚动条，要一直显示滚动条 .el-scrollbar__bar.is-vertical { opacity: 1; } el-table中也可以这样用 <el-table :max-height="tableHeight" > data（）{ return { tableHeight: window.innerHeight - 200; } } ......
el-table横纵向滚动条固定在可视屏幕内，并自适应分辨率
qq_67447855的博客
03-09 2346
需求：在使用el-table中，当每页数据过多时浏览器会自动产生纵向滚动条，拖动后表头也看不到了，当表头过长后，也会产生横向滚动条，但是横向滚动条固定在table最底部，不利于操作。思路：利用自定义指令中的el找出table的dom元素，获取到视窗总高度，获取到table离视窗上面的高度，获取到指令中回传想设置的离底部的高度，计算后获得table高度，并设置css，再通过resize监听动态获取高度，设置高度。
Element 表格固定列横向滚动条无法拖动的问题解决
张兴华的博客
11-20 4435
在Element-UI中，当对表格列进行固定后，底部的横向滚动条就无法拖动了，主要的问题就是固定区域盖住了横向滚动条，解决的办法就是将固定区域底部留出一个滚动条高度的距离。 如下图所示为对固定列区域调整后的效果图： 下面是解决问题所需的代码： .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。 码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~
将el-table的横向滚动条固定在可视屏幕的下方
huatoudd的博客
10-26 2363
elementui table横向滚动条固定在屏幕最下方显示 原因：数据一多，横向滚动条需要配合纵向滚动条拖动才能看到，十分不方便 解决方法：在el-table中增加 height属性 返回窗口的文档显示区的高度，并且赋值给el-table computed: { tableMaxHeight() { return window.innerHeight - 170 + 'px'; } ...
element表格给某一列添加横向滚动条
weixin_38999134的博客
06-25 225
【代码】element表格给某一列添加横向滚动条。
elementui table横向滚动条
06-28
### 回答1： ElementUI 的表格（Table）组件在列过多时会出现横向滚动条。如果你希望在表格的底部显示一个固定的横向滚动条，可以在表格外层包裹一个固定高度的容器，并给该容器设置 `overflow-x: auto` 样式。这样即可实现表格的横向滚动条固定在容器底部的效果。 具体实现步骤如下： 1. 在模板中，将 Table 组件包裹在一个具有固定高度的 div 容器中，如下所示： ``` <div class="table-container"> <el-table :data="tableData" style="width: 100%"> <!-- 表格列的定义 --> </el-table> </div> ``` 2. 在样式表中，为这个容器设置 `overflow-x: auto` 样式，并将 Table 组件的样式设置为 `width: 100%`，如下所示： ``` .table-container { height: 300px; /* 设置容器高度 */ overflow-x: auto; /* 显示横向滚动条 */ } .el-table { width: 100%; /* 设置表格宽度为容器宽度 */ } ``` 这样就可以实现 ElementUI 表格的横向滚动条了。 ### 回答2： ElementUI 是一款基于 Vue.js 的组件库，在前端开发中可以很方便地使用它来构建界面。其中，Table 组件是最常用的一个组件之一。Table 组件的作用是在页面上呈现数据表格，可以进行分页、排序、筛选、展开等操作。但是，在数据过多的情况下，表格的宽度也会跟着增加，影响页面的布局和用户的体验。因此，Table 组件添加横向滚动条可以解决这个问题。 要实现 Table 组件的横向滚动条，只需要在外层加一个 div 包裹 Table 组件，并设置其样式为 overflow-x: auto; 即可。代码如下： ``` <template> <div class="table-container"> <el-table :data="tableData"> <!-- 你的表格内容 --> </el-table> </div> </template> ``` ``` .table-container { overflow-x: auto; } ``` 上面的代码中，使用了一个名为 “.table-container” 的 div 来包裹 Table 组件，将其宽度固定，设置 overflow-x 属性为 auto，这样当表格的宽度超出容器宽度时就会出现横向滚动条，可以通过鼠标滚动或者拖动滚动条来查看表格的全部内容。 需要注意的是，为了让表格显示更美观，我们还可以给表头加一个固定的宽度，避免产生“抖动”现象，代码如下： ``` .el-table thead th { width: 200px; } ``` 上面的代码中，将表头的宽度设定为 200px，如果你的表头内容长度不确定可以自行更改。 在使用 Table 组件的过程中，添加横向滚动条可以优化界面布局，提高用户体验。因此，在处理大量数据时，就可以使用该方法来较好地展示数据，使用户更加方便地进行选择，操作，提高效率。 ### 回答3： ElementUI 是一个非常流行的 Vue.js 组件库，其中的 Table 组件为我们展示表格数据提供了很大的帮助。Table 组件支持诸多的功能，除了基本的表格数据展示之外，还可以实现数据筛选、分页、排序等功能。其中，横向滚动条是 Table 组件一个非常实用的功能，它的作用是当表格中的列宽度超过表格宽度时自动出现横向滚动条，从而让表格更加美观、易用。 针对 ElementUI Table 组件中横向滚动条的使用，需要我们注意以下几点： 1. 为表格设置固定宽度或最小宽度，以保证表格不会变形或出现错位现象。 2. 为需要横向滚动的列设置宽度。可以使用百分比、像素或者 calc() 函数来设置列宽，根据实际需求来灵活调整宽度。 3. 使用 Table 组件中的外部滚动功能，通过设置表格容器的 max-height、overflow等属性来实现滚动条的出现。 4. 设置 Table 组件的 border 属性为 true，可以更好地让用户感知表格的边界。 对于横向滚动条的实现，需要设置 Table 组件的属性 scopedSlots，使用 v-slot:default 来包裹需要横向滚动的列，从而实现对列的控制和样式的设置。具体的代码实现可以参考 ElementUI 官方文档，或者互联网上的一些教程和案例，结合实际情况进行调整和优化。 总之，ElementUI Table 组件的横向滚动条是一个非常实用的功能，可以通过设置表格的宽度、列宽度等属性来实现。同时，还需要注意表格的样式和布局，结合实际情况进行灵活调整和优化，以达到更好的用户使用体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值