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

最新推荐文章于 2024-09-16 17:51:15 发布
最新推荐文章于 2024-09-16 17:51:15 发布
阅读量3.5k 收藏 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来改变

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

一颗苦涩的苹果
关注
专栏目录
Element表格固定第一列和第一行，并通过属性名动态渲染数据
weixin_45263716的博客
09-28 2492
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 6898
需求描述：首行固定，吸附在表头下，数据多时其他行可以纵向滚动方案一 两个表格拼凑第一个表格展示头部和固定行 第二个表格展示其它数据 示意图如下优点：固定行数没有限制缺点：适用场景，仅横向 纵向均无滚动条时可用若有横向滚动条，两个表格的滚动条是分开的，会出现滚动A B不动，或滚动B A不动的情况，Windows下会展示两个横向滚动条，不美观若有纵向滚动条，在Windows下滚动条是默认有宽度的，...
＜el-table＞设置一列为固定字段，其他列为循环生成
qq_51196135的博客
03-28 774
【代码】设置一列为固定字段，其他列为循环生成。
Vue基于ElementUI实现Table首行固定
小龙哒的博客
06-26 9843
.el-table--scrollable-x .el-table__body-wrapper { overflow: scroll !important; height: 29rem !important; } 加上这句话，完事
【el-table】固定第一行，其他行可以鼠标滑动滚动，固定列用fixed属性
花椒和蕊的博客
04-19 6570
el-table有个属性fixed，给哪一列加上，就可以固定哪一列 实际使用 <el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column> 但是没有属性可以让行固定，朋友给了思路 有个属性是show-header，默认是展示表头的 我们用两个表格，第一个表头只展示一条数据，第二个表格让它不展示表头，加样式，overflow-y：hidden
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
element-ui表格操作大全
Wgq0731的博客
09-16 1341
通过给type=index的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从0开始）作为参数，返回值将作为索引展示。上述代码将第一列作为索引列，并且传入了一个indexMethod函数自动传入了当前行数，然后返回了当前行数*2作为下一行索引值。
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的表格行高怎么控制
zhangkegu的博客
01-03 1968
依旧在我负责的当前项目中举例子： 我的表格要求是一页只显示10条数据，且纵向不能产生滚动条，这样就意味着不能设置表格的整体高度来控制，那样会会产生滚动条，要么在表格纵向产生滚动条，要么在屏幕纵向产生滚动条，这时候我就想到了控制表格每一行的高度降低，就不会 十条数据就产生滚动条了，方法如下： 一：定义一个table表格的style 的回调方法，如图 该方法是element插件中的文档有的固定方...
ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题
博哥的二进制世界
09-07 4419
ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题
elemnet-ui table固定列没有随列表滚动问题
gyypwrs的博客
04-06 875
问题描述 如下图所示，固定操作列在右侧，但是列表内容滚动，固定列没有随之滚动 解决方法 .el-table__fixed-body-wrapper{ bottom: 0; }
antd中table表格实现列内的滚动
Zeng__Yi的博客
11-26 9363
不设置列内滚动的效果： 设置之后的效果： 当有一列的数据特别多，如果不设置滚动 就显得很不好看。 实现方法： 在columns中在这一列设置样式，columns中设置了列的宽度，是要再设置列的高度，溢出滚动就可以实现了 代码： { title: '评价内容', dataIndex: 'evaluation', width:'180px', render:(text)=&...
【vue】elementUI中el-table拖动滚动条的时候固定某一列
前端代码小白的日常博客
04-25 5102
写项目的时候有一个需求，就是当el-table的滚动条滑动的时候，可见区域如果没有该列则固定到左侧，由elementUi官方网站可知el-table固定一列的代码如下:fixed为主要的标识头部固定设置的是table的高度。
表格滚动，表头不滚动，表数据内容滚动
Caroline_Yang的博客
08-21 1910
&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 698
当我把表格当中前几列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 3362
后台管理系统，多半都有表格，数据量大的时候，需要固定表头或者底部。 因为饿了么是局部滚动的，现在我们需要改饿了么某些样式实现全局滚动 饿了么局部滚动 全局滚动demo 删除height=200 固定表头 流的破坏与保护 float float的本质和特性 包裹性； 块状化并格式化上下文 破坏文档流 没有任何margin合并 包裹性：假设...
解决elementUI表格冻结列遮挡横向滚动条的问题
u010875133的博客
06-29 156
【代码】解决elementUI表格冻结列遮挡横向滚动条的问题。
vue-element-admin里el-table表格如何设置头尾固定中间滑动的效果
最新发布
09-20
在 Vue-Element-Admin 中，`ElTable` 是 Element UI 提供的一个强大的表格组件，如果想要实现表头固定、内容区域滚动以及底部固定的分页效果，你可以按照以下步骤操作： 1. 首先，安装 `element-ui` 和 `vue-fixed-columns` 插件，这是第三方库用于实现固定列的功能： ```bash npm install element-ui vue-fixed-columns ``` 2. 引入所需的样式和组件： ```javascript import { ElTable, ElTableColumn } from 'element-ui'; import FixedColumns from 'vue-fixed-columns'; ``` 3. 使用 `FixedColumns` 组件包裹你的 `ElTable`： ```html <template> <div> <FixedColumns :columns="tableColumns" :height="height"> <el-table :data="tableData" style="width: 100%"> <!-- ... 表格数据和列配置 ... --> </el-table> </FixedColumns> </div> </template> ``` 4. 定义 `tableColumns` 变量，包含表头和动态生成的列，以及固定列和滚动区域的配置： ```javascript export default { data() { return { tableColumns: [ // 固定列 { type: 'index', width: 50 }, { prop: 'header1', label: '标题一', fixed: 'left', width: 200 }, // 动态生成的列 ... ], tableData: [], // 数据源 height: window.innerHeight, // 滚动区域高度，可以根据需求调整 // ... 其他变量 }; } } ``` 5. 确保你的表格数据已经填充，并处理滚动事件和其他交互，比如分页。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值