用element-ui给表格第一列固定住不动，其他的滚动

最新推荐文章于 2024-07-05 10:49:33 发布
最新推荐文章于 2024-07-05 10:49:33 发布
阅读量3.4k 收藏 5
点赞数 2
分类专栏： element-ui里table表格固定一行滚动条拖拽不动的解决方法 文章标签： vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ybwarmyoung/article/details/115355116
版权
在使用Element-UI的Table组件时遇到了固定列滚动条显示不正常的问题。通过添加自定义CSS样式解决了这个问题，将`.el-table.el-table__fixed`的样式设置为`height:auto!important; bottom:16px;`，现在可以在任意位置拖动滚动条。这个解决方案可能对遇到类似问题的前端开发者有所帮助。
摘要由CSDN通过智能技术生成

在element-ui里面的table表格上面找到fixed属性后，加到了要固定那个标签上面在这里插入图片描述
但是又遇到这样一个问题
在这里插入图片描述
想了半天方法，我们可以给它加上css样式

<style>
.el-table .el-table__fixed {
  height: auto !important;
  bottom: 16px;
}
</style>

这样就可以了在哪行下面都可以进行拖拽滚动条

原因是这个，因为我们用element-ui上面的组件，只是复制了他们的源代码，要在本文件下面或者全局App里面加上css来改变

这是我今天遇到的问题，希望可以帮助你们，网友们

一颗苦涩的苹果
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Element表格固定第一列和第一行，并通过属性名动态渲染数据
weixin_45263716的博客
09-28 2469
Element表格固定第一列和第一行，并通过属性名动态渲染数据 <el-table :data="sentimentData" style="width: 680px"> <el-table-column fixed prop="name" label="区域" width="100"> <template slot
element表格固定某一行_ElementUI Table 首行固定
weixin_39603598的博客
12-19 6846
需求描述：首行固定，吸附在表头下，数据多时其他行可以纵向滚动方案一 两个表格拼凑第一个表格展示头部和固定行 第二个表格展示其它数据 示意图如下优点：固定行数没有限制缺点：适用场景，仅横向 纵向均无滚动条时可用若有横向滚动条，两个表格的滚动条是分开的，会出现滚动A B不动，或滚动B A不动的情况，Windows下会展示两个横向滚动条，不美观若有纵向滚动条，在Windows下滚动条是默认有宽度的，...
【el-table】固定第一行，其他行可以鼠标滑动滚动，固定列用fixed属性
花椒和蕊的博客
04-19 6477
el-table有个属性fixed，给哪一列加上，就可以固定哪一列 实际使用 <el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column> 但是没有属性可以让行固定，朋友给了思路 有个属性是show-header，默认是展示表头的 我们用两个表格，第一个表头只展示一条数据，第二个表格让它不展示表头，加样式，overflow-y：hidden
使ElementUI的el-table表头自动吸顶，支持左右固定列
伶俜Monster
04-10 1408
在使用el-table的时候，在数据多的情况下滚动表格会看不到表头是什么，为了用户体验可以使用表头吸顶来展示，如此丝滑的操作谁见了都说好。
el-table实现固定列，及解决固定列导致部分滚动条无法拖动的问题
最新发布
askuld的博客
07-05 1417
当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。fixed属性：列是否固定在左侧或者右侧，true 表示固定在左侧；可选值：true, left, right。
elemnet-ui table固定列没有随列表滚动问题
gyypwrs的博客
04-06 844
问题描述 如下图所示，固定操作列在右侧，但是列表内容滚动，固定列没有随之滚动 解决方法 .el-table__fixed-body-wrapper{ bottom: 0; }
Vue基于ElementUI实现Table首行固定
小龙哒的博客
06-26 9802
.el-table--scrollable-x .el-table__body-wrapper { overflow: scroll !important; height: 29rem !important; } 加上这句话，完事
antd中table表格实现列内的滚动
Zeng__Yi的博客
11-26 9262
不设置列内滚动的效果： 设置之后的效果： 当有一列的数据特别多，如果不设置滚动 就显得很不好看。 实现方法： 在columns中在这一列设置样式，columns中设置了列的宽度，是要再设置列的高度，溢出滚动就可以实现了 代码： { title: '评价内容', dataIndex: 'evaluation', width:'180px', render:(text)=&...
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
element表格固定某一行_Element-UI中关于table表格的那些骚操作
weixin_39639919的博客
12-19 547
最近的项目中使用到element-ui组件库，由于做的是后台管理系统，所以经常需要操作表格，编辑样式的过程中遇到一些问题，官网针对table给出了很多的api，自己可以自定义，基本能满足产品需求，但是没有给出具体的案例，网上的资料也比较简略，这里简单整理下一些常用的操作，如果有类似的功能可以做一个参考。具体的使用方法还是建议仔细阅读官网-table章节：该项目demo已上传github，欢迎大家下...
element-ui.zip
12-27
在使用vue进行前端开发时，使用element-ui框架，当表格过高时出现滚动条，导致底部行错位，其原因是因为表格固定列的时候，鼠标滚动是内部计算的（详细信息看源码）。谷歌浏览器会发生这种情况，火狐不会发生这种...
基于element-ui的table表格封装
02-24
在前端开发中，Element UI 是一个非常流行的组件库，它为 Vue.js 应用提供了丰富的 UI 组件。本文将深入探讨如何基于 Element UI 进行 table 表格的封装，以便于在实际项目中实现更高效、可复用的代码。 Element UI...
Vue element-ui表格数据懒加载
热门推荐
物联网三分钟
07-14 1万+
大部分参考Angrybird233的简书文章，自己细节实现一下 引入element-ui npm 的方式安装 element-ui npm i element-ui -S 在 main.js 中写入以下内容： import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 新建Table.vue 主要就是tableListener()方法，监听dom的sc.
【vue】elementUI中el-table拖动滚动条的时候固定某一列
前端代码小白的日常博客
04-25 4969
写项目的时候有一个需求，就是当el-table的滚动条滑动的时候，可见区域如果没有该列则固定到左侧，由elementUi官方网站可知el-table固定一列的代码如下:fixed为主要的标识头部固定设置的是table的高度。
表格滚动，表头不滚动，表数据内容滚动
Caroline_Yang的博客
08-21 1896
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;meta name="viewport" content="wi
Element 中表格固定列后横向滚动条无法拖动
找师父的小白的博客
12-16 677
当我把表格当中前几列fixed=left的时候底下的滚动条会失效，直接无法拖动 如何解决？ .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。 参考文章： https://blog.csdn.net/weixin_40629244/article/details/110506532 今天也是努力搬砖的小花????吖~ 就酱！啾咪????~
【element】改变el-table样式，实现全局滚动，固定表头和表尾
weixin_30386713的博客
09-17 3344
后台管理系统，多半都有表格，数据量大的时候，需要固定表头或者底部。 因为饿了么是局部滚动的，现在我们需要改饿了么某些样式实现全局滚动 饿了么局部滚动 全局滚动demo 删除height=200 固定表头 流的破坏与保护 float float的本质和特性 包裹性； 块状化并格式化上下文 破坏文档流 没有任何margin合并 包裹性：假设...
解决elementUI表格冻结列遮挡横向滚动条的问题
u010875133的博客
06-29 116
【代码】解决elementUI表格冻结列遮挡横向滚动条的问题。
如何实现elementui中的表格固定第一行标题，内容滚动
06-10
要实现 element-ui 中的表格固定第一行标题，内容滚动，可以使用 el-table 组件的 slot-scope 和 el-scrollbar 组件的滚动条功能。 以下是实现步骤： 1. 在 template 中使用 el-table 组件，并设置表格的样式和高度。 ``` <el-table :data="tableData" style="width: 100%" height="300"> <!-- 表格列定义 --> </el-table> ``` 2. 在表格中使用 slot-scope="scope"，获取表格数据和表格列信息。 ``` <el-table :data="tableData" style="width: 100%" height="300"> <template slot-scope="scope"> <tr> <th v-for="item in scope.columns" :key="item.label"> {{ item.label }} </th> </tr> <tr v-for="item in scope.data" :key="item.name"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.address }}</td> <!-- 其他表格列定义 --> </tr> </template> </el-table> ``` 3. 在表格外部包裹一个带有滚动条的容器，例如 el-scrollbar 组件。 ``` <el-scrollbar style="height: 300px;"> <el-table :data="tableData" style="width: 100%" height="300"> <!-- 表格列定义 --> </el-table> </el-scrollbar> ``` 4. 在表格容器上设置 overflow-y: auto，使其在容器高度内部滚动。 ``` .el-table__body-wrapper { overflow-y: auto; } ``` 5. 在表格容器上设置 max-height，使其高度不超过容器高度，从而触发滚动条。 ``` .el-table__body-wrapper { max-height: 300px; overflow-y: auto; } ``` 6. 在表格头部上方添加一个固定的表格行，显示表格列标题。 ``` <el-scrollbar style="height: 300px;"> <el-table :data="tableData" style="width: 100%" height="300"> <template slot-scope="scope"> <tr> <th v-for="item in scope.columns" :key="item.label"> {{ item.label }} </th> </tr> <tr v-for="item in scope.data" :key="item.name"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.address }}</td> <!-- 其他表格列定义 --> </tr> </template> <template slot="header"> <tr> <th v-for="item in tableData[0]" :key="item">{{ item }}</th> </tr> </template> </el-table> </el-scrollbar> ``` 这样，就可以实现 element-ui 中的表格固定第一行标题，内容滚动了。当表格数据较多时，表格头部的列标题会固定在页面顶部，表格内容可以通过滚动条滚动。同时，滚动条会出现在表格容器中，用户可以通过滚动条滚动表格内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值