elementplus el-table当表格的长度大于容器的宽度导致剩下的无法显示出来

最新推荐文章于 2024-07-18 18:15:39 发布

小杨爱编程

最新推荐文章于 2024-07-18 18:15:39 发布

阅读量1.7k

点赞数 2

分类专栏：实用技巧文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yajyaj123/article/details/126872834

版权

实用技巧专栏收录该内容

17 篇文章 0 订阅

订阅专栏

问题

当显示区域小于表格列表x方向显示内容时列表完全撑开表格无法触发el-table组件的滚动事件

解决

只需要在el-table组件外套一层 element-plus 的隐藏组件 el-scrollbar

//不固定表头
<el-scrollbar>
    <el-table></el-table>
</el-scrollbar>

//如果是固定表头
<el-scrollbar style="display: none"> 
      <el-table></el-table>
</el-scrollbar>

这样问题就可以解决了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小杨爱编程

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3+ElementPlus el-table单选清空选中项

朝花夕拾的博客

06-21

1414

setCurrentRow 不加参数默认去掉高亮显示选中行。此时会触发current-change事件需要进行判空操作。

element-ui Table表头超出指定宽度显示...，并做hover效果

m0_44959128的博客

11-03

558

【代码】element-ui Table表头超出指定宽度显示...，并做hover效果。

1 条评论您还未登录，请先登录后发表或查看评论

element-plus el-table 显示不全或者不显示

仰望星空的博客

08-25

3478

解决element-plus el-table 显示不全或者不显示

element UI ：el-table横向列内容超出宽度，滚动条不显示问题

qq_44776454的博客

07-18

1424

element UI ：el-table横向列内容超出宽度，滚动条不显示问题

element table横向超过100%

weixin_43385164的博客

11-14

430

element table 不设置个单元宽度时，table应该是自适应100% 单元格压缩，使用中出现table宽度大于100%，撑开body情况，element 2.15.14 版本。

element表格重新布局，element表格显示不全，doLayout

qingdi1的博客

12-07

2013

element表格重新布局，element表格显示不全，doLayout 问题：解决办法 Table 的 doLayout 方法，用于重新计算 Table 的布局问题： 1.element table show-summary 合计行不显示问题 2.element table显示格式不正确 3.element table显示不完整解决办法重新布局table updated() { this.$nextTick(() => { this.$refs['table'].doLay

el-tabs标签内容的宽度超出容器宽度时鼠标移入有内容提示

qq_44716001的博客

06-19

821

【代码】el-tabs标签内容的宽度超出容器宽度时鼠标移入有内容提示。

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

10-17

在模板中使用这个变量时，你需要使用Vue的属性绑定语法（即使用冒号":"开头），这样可以确保当tableHeight变量更新时，表格的高度也会相应地更新： ```html <el-table :data="tableData" :height="tableHeight" ...

改变el-table宽度

12-12

如果存在这些宽度数据，那么它会更新`tableColumn`对象，确保表格加载时显示用户之前设定的宽度。此外，`surverWidth`方法是处理列宽变化的关键。当用户拖动列宽时，`@header-dragend`事件会被触发，传递一个新的...

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

10-17

此外，为了处理不同长度的表头文字导致的折行问题，可以设置动态宽度。例如，我们有一个`positionKey`对象，其中键对应于数据对象的属性，值包含了标题和宽度信息： ```javascript const positionKey = { key1: { ...

【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用

最新发布

09-10

【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用【vue+el-table】表格操作列宽度跟随按钮...

el-table 设置内容超出宽度后省略，并添加tooltip

weixin_42889176的博客

01-25

1012

el-table 设置内容超出宽度后省略，并添加tooltip

随便记一下el-table奇怪宽度问题

lx233

04-07

2743

背景接入子应用的页面，忽然宽度就1900，其他页面没设置什么，却都在1300左右原因 el-table太长，某些封装问题，影响到了之前某次看到el-table 无限期增长，反正删掉table就ok 解决方法1 解决方案：在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative; 示例截图：注意：如果遇到flex布局中使用

element表格宽度异常

liutianxiao123的博客

03-09

683

<div class="sjzl-conponent" :class="isFullScreen?'full':'notFull'"> <div style="width: 100%;position: absolute;"> <el-tabs v-model="activeName"> <el-tab-pane label="数据总览" name="first"> ...

el-card里面添加el-table表格无法撑开

段王爷的博客

01-18

2453

在进行页面布局分块后，在el-card卡片里添加el-table后，表格数据无法撑开，只能显示一行且自动带上了滚动条，展示效果十分不理想。通过F12检查发现，.el-card__body该属性的限制导致无法撑开。

el-table 表头和表格列宽不一致

mry6的博客

03-22

1811

el-table 表头和表格列宽不一致页面如下图解决办法一解决办法二修改后的结果页面如下图解决办法一将以下样式代码添加到index.html或app.vue中的style标签中 <style> body .el-table th.gutter{ display: table-cell!important; } </style> 解决办法二自己定义一个common.css文件，在文件中将下面样式引入 body .el-table th.gutter{ di

el-tooltip的二次封装，文字过长省略，hover时悬浮，不省略不悬浮

qq_45840993的博客

10-21

851

el-tooltip是我们的常用组件，但是无法判断绑定元素是否过长需要省略的，此组件对el-tooltip的二次封装，文字过长省略，hover时悬浮，未超出长度限制时不显示，代码如下。

el-table表格之下方的内容被外层的div覆盖显示不出来的解决办法

qq_44774831的博客

04-10

2016

问题：在做项目的过程中，发现表格中本来需要显示10条数据，却只显示了8条如图所示，怎么解决这个问题呢？查了官放文档发现可以通过max-height这个属性来解决… 解决办法： <el-table中添加max-height="500px"即可，具体数值多大根据具体项目而定 <el-table :data="userList" border style="width: max-height="500px"> 添上后的效果： ...

解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题

aa_mmnn的博客

05-28

2282

在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。如上图所示，现在表格下方是未出现水平滚动条的，处于表格宽度刚好够显示所有字段的临界值，固定列出现了高度变小的情况，导致显示不全。上图为检查元素找到的固定列的DOM元素，固定列的DOM元素是独立于表格body的，所有在开发代码中，给该列设置任何class或style是无法添加在固定列这个DOM元素上的。从这个DOM元素可以看

elementplus el-table toggleRowSelection

09-07

Element Plus 的 `el-table` 组件提供了一个 `toggleRowSelection` 方法，用于切换行的选择状态。这个方法主要用于表格的交互式操作，允许用户通过点击行来进行选中或取消选中。当你需要启用表格的单选或多选模式，可以调用此方法并传入相应的参数，比如 `true` 或 `false` 来控制当前行是否被选中，或者传递整个行的对象来指定特定行。例如，在Vue组件中，你可以这样做： ```html <template> <el-table :data="tableData" @selection-change="handleSelectionChange">  <el-table-column type="selection" width="55"></el-table-column> </el-table> </template> <script> export default { methods: { handleSelectionChange(selection) { console.log('当前选择的行:', selection); // 调用toggleRowSelection方法 this.$refs.myTable.toggleRowSelection(selection); // myTable是你el-table的实际引用名 } } } </script> ``` 当用户在表头单击以选择或取消选择所有行，或者在表格内点击某一行时，`handleSelectionChange`方法会被触发，然后你可以通过`toggleRowSelection`来更新行的状态。