设置el-table超出高度出现滚动条

最新推荐文章于 2024-03-27 15:06:04 发布
最新推荐文章于 2024-03-27 15:06:04 发布
阅读量5.9k 收藏 4
点赞数 3
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63896561/article/details/130402231
版权

 设置el-table数据溢出出现滚动条：

方式1：

看了下element-ui官网，el-table有一个height属性：

 

直接给el-table设置height属性，height包括表头的高度；设置了height后，则行旁边就会出现一个滚动条了。 但会造成一个问题，如图：

解决方式：

 

 

方式2：

el-table还有一个max-height的属性

 

 

 

长相思979
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
table表格超出高度自动滚动
zxl_start的博客
12-13 1584
超出高度滚动 <div class="response_action response_action_scroll" @mouseover="mouseOverHandler" @mouseout="mouseoutHandler"> // 内容区 </div> data() { return { activeInterval: null, netCarCurrentScollTop: 0, } } methods: {
Vue3-elementplus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色（详细示例代码，解决样式覆盖失败问题）
最新发布
Lynn
03-27 1062
Vue3 Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）)
element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）
wocwin的博客
04-24 1万+
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）
Element-UI el-table高度不固定，自适应高度显示滚动条
weixin_72589507的博客
11-18 5629
el-table高度不固定，自适应高度显示滚动条
el-table实现表格内容超出规定行数内容滚动
ZYX10077的博客
09-17 2202
el-table实现表格内容超出规定行数内容滚动 效果图 elementUI 前往elementUI:https://element.eleme.cn/#/zh-CN/component/table html代码 <el-table-column prop="value" class-name="table_column-over-scroll__y words-bold"></el-table-column> # css 代码 // 加到相应的table就可以 .dat
原生table:表格table中thead固定，tbody超出高度出现滚动条
热门推荐
qq_37899792的博客
05-16 2万+
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格、行、列的算法规则。 tableLayout有如下三个值：autofixedinherit 值 描述 auto 默认。列（td，th）宽度由单元格内容设定。 (1) 给td指定的width不一定生效，td的width会自动调整 (2) text-overflo...
原生Table--表格超出部分添加滚动条
weixin_47194802的博客
05-17 1480
其实我想表达的是--如果数据特别多，我想让他滚动滚动滚动滚动....用惯了elm的table,突然要写一个原始的table....这里是template部分，简简单单，用tr,td写的。这里是我的css部分....用vue3写的假数据。
关于 element-plus el-table 表格列表滚动条无法正常触发问题解决
HHH917的博客
03-03 6532
定制 el-table 内部样式 css样式是使用scss 及tailwindcss编写的 可选样式 列表高度撑开表格 // 表格列表高度完成撑开 .table_height_full { & ::v-deep .el-table__inner-wrapper { .el-table__body-wrapper { height: auto !important; .el-scrollbar__wrap { height: auto !import
el-table表格实现自动滚动效果
Callme_FanXu的博客
11-01 5819
table页面的内容如果超出设定的height会出现自动无限滚动的效果，如下所示： 先给el-table一个ref属性 然后获取到这个属性 在mounted阶段执行scrollFun函数，通过setTnterval定时器来实现动态滚动效果，代码如下： 如果出现列表字段过长时，可使用tooltip-effect=“dark” 搭配 show-overflow-tooltip 来实现省略提示效果
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 el[email protected]，使用前请熟悉： el[email protected] el[email protected] 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
vue2 -- 解决el-table自适应高度,页面不显示多条滚动条，超出的部分让el-table内部出现滚动条。
King Saj
12-06 717
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的：只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。页面上布局是头部-面包屑，中间-表格，底部-分页组件。需要使表格高度需要自适应屏幕。\src\mixins\TableHeight.js 新建 TableHeight.js 文件。首先先import导入js文件，mixins中使用。
Element el-table 固定高度后当数据条数过多产生滚动条的问题
m0_71959549的博客
01-05 783
可以发现出现了新的问题，表头列与内容列发生了错位。解决方法：给内容宽度加上滚动条的宽度。
【已解决】解决 el-table滚动条超出表头/表格
bao
07-08 2375
el-table滚动条放到表格内部.
#vue3# el-table-horizontal-scroll 让 el-table 在底部显示横向滚动条
ZHENGCHUNJUN的博客
01-17 1406
底部会出现滚动条，但使用起来不太便捷，因为每次需要先滚动到底部才能使用。当鼠标悬停在表格上时，滚动条会显示，的宽度超出浏览器宽度时，尽管。时，确保你的选择器放在括号内）的滚动体，这显得相当繁琐。在main.ts（全局注册）为了提升体验，希望在。使用深度穿透进行修改。
el-table添加横向滚动条
m0_53871713的博客
03-27 4834
手动向该类添加样式，如果你觉得悬停时滚轮太小，您可以将此添加到样式中。默认是悬停，当鼠标悬停在桌面上时，该工具条会显示出来。或者你可以将它改为always，并使栏始终显示。ps: 你可以使用always或hover。
给el-table加滚动条，实用！
m0_59866374的博客
08-30 1403
el-table滚动条！
左树右表结构，el-table内容溢出元素框时不出现横向滚动条问题
好好学习，好好生活
01-22 611
flex布局不变，flex: 1换成css3提供的动态计算属性。布局下并且自适应了宽度才会出现这种问题。对比了其它布局，发现只有。
el-table-column fixed 后滚动条不能使用
05-25
如果使用 el-table-column 的 fixed 属性，滚动条会被 el-table 的外部容器覆盖，导致无法使用。解决方法是给 el-table 组件添加一个样式 `overflow: auto` 来显示滚动条，示例代码如下： ```html <el-table :data="tableData" style="width: 100%; overflow: auto;"> <el-table-column prop="name" label="Name" fixed></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 另外，如果你在使用 fixed 属性后还想要表格自适应页面宽度，可以给 el-table 组件添加 `max-height` 和 `min-width` 样式，示例代码如下： ```html <el-table :data="tableData" style="width: 100%; overflow: auto; max-height: 500px; min-width: 600px;"> <el-table-column prop="name" label="Name" fixed></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 这样就可以使用 fixed 属性并且正常显示滚动条了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值