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

最新推荐文章于 2025-04-22 10:47:04 发布

小杨爱编程

最新推荐文章于 2025-04-22 10:47:04 发布

阅读量1.8k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/Yajyaj123/article/details/126872834

版权

实用技巧专栏收录该内容

18 篇文章

订阅专栏

问题

当显示区域小于表格列表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

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

m0_44959128的博客

11-03

680

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

前端实战：Vue3+ElementPlus+ECharts实现后台管理系统

qq_22910257的博客

01-07

1641

本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。

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

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

仰望星空的博客

08-25

3837

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

vue3 element-plus flex布局 el-table表格高度自适应，超出显示滚动条大屏

最新发布

博客

04-22

348

vue3 element-plus flex布局 el-table表格高度自适应，超出显示滚动条大屏子绝父相

element table横向超过100%

weixin_43385164的博客

11-14

614

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

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

qingdi1的博客

12-07

2153

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

973

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

elementplus 表格方向

08-25

- *1* *2* [elementplus el-table当表格的长度大于容器的宽度导致剩下的无法显示出来](https://blog.csdn.net/Yajyaj123/article/details/126872834)[target="_blank" data-report-click={"spm":"1018.2226.3001....

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

weixin_42889176的博客

01-25

1160

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

element表格宽度异常

liutianxiao123的博客

03-09

732

<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

2785

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

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

mry6的博客

03-22

1979

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

963

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

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

qq_44774831的博客

04-10

2120

问题：在做项目的过程中，发现表格中本来需要显示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

2406

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

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

lx233

04-07

2980

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

Element Plus的el-table表格中单元格内容过多显示省略号，并修改弹框样式

weixin_60196946的博客

01-29

2525

表格中内容超出单元格的宽度会自动换行，会使整个表格看起来显得不太美观，此时可以使用el-table-column 自带的属性来设置。

Element Plus Table 表格单元格内容过长处理

m13012606980的专栏

06-23

6644

Element Plus：基于 Vue 3，面向设计师和开发者的组件库。官网：https://element-plus.gitee.io/zh-CN/

el-table标题头显示混乱问题（vue3 + elementplus + js）

qq_39188241的博客

04-11

459

这里从官网直接复制过来的代码：显示结果却如上图混乱。解决方法：就是将标签更改一下即显示正常。

el-table文字超出tooltip

01-31

### 使用 Element UI `el-table` 实现文字超出时自动显示 Tooltip 为了实现在 `el-table` 中当单元格中的文字超出容器宽度时自动显示 Tooltip 提示，在 HTML 结构上可以嵌套使用 `el-tooltip` 和自定义样式控制文本溢出行为。 #### 自动显示 Tooltip 配置方法通过结合 CSS 控制文本单行显示并隐藏多余部分，再利用 `el-tooltip` 来展示完整的文本内容。具体实现方式如下： ```html <template> <el-table :data="tableData" style="width: 100%">  <el-table-column prop="name" label="名称"> <template v-slot="{ row }"> <el-tooltip effect="dark" :content="row.name" placement="top-start"> <span class="ellipsis">{{ row.name }}</span> </el-tooltip> </template> </el-table-column> <el-table-column prop="description" label="描述"> <template v-slot="{ row }"> <el-tooltip effect="dark" :content="row.description" placement="top-start"> <div class="multi-line-ellipsis">{{ row.description }}</div> </el-tooltip> </template> </el-table-column> </el-table> </template> <script setup> import { ref } from 'vue'; const tableData = ref([ { name: "这是一条很长的名字", description: "这是一个非常详细的描述信息，它可能会超过一两行..." }, // 更多数据... ]); </script> <style scoped> /* 单行省略 */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行省略 */ .multi-line-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 设置最大行数 */ overflow: hidden; } </style> ``` 上述代码片段展示了如何创建一个带有 Tooltip 功能的表格列[^3]。对于较长的文字内容，应用特定类名 `.ellipsis` 或者 `.multi-line-ellipsis` 可以让其在视觉上被截断，并且只有当鼠标悬停于该区域之上才会弹出完整的内容作为提示框。