el-tabel样式混乱

已于 2022-07-09 14:26:56 修改
阅读量280 收藏
点赞数
文章标签： 前端 大数据 html
于 2022-07-09 14:21:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fhrlhh/article/details/125693083
版权

首先来看小可爱反馈的bug截图

 

 点击下一页的时候,页面单元格开始混乱,因为页面有合并单元格,所以我首先怀疑了合并单元格的问题, 不过很快就排除了,之后我把问题定位到了key上.

如上可以看到代码里面,表格绑定了row-key,定位到这个函数,发现return的是row.number ,

这个number 代表的是表格第一列的需要,是1-10 , 第二页也如此,所以铁定是会重复的,于是改成了下面这样,问题解决.

liberalhumblehopeful
关注
解决el-table树形数据量过大，导致卡顿问题
IT_dabai的博客
06-30 5541
element-ui里面的树状表格，当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。这种处理方式会在展开过多时慢慢变得卡顿，所以需要提供一个逻辑，使得用户可以一键回到第一层，且卸载所有子节点。我以为是源码里的逻辑不好，debug源码，但是没有发现原因，后求助同事，得出是dom元素过多导致的。在点击展开的时候，改变display样式，因为元素位置变化，页面发生回流，且元素多，所以开销大。一次性加载所有数据的时候，折叠的元素都已经加载了，只是样式为dispaly：none；
el-table使用fixed固定列以后，切换左右页面，列表显示混乱
qq_40247817的博客
01-06 944
el-table使用fixed固定列以后，切换左右页面，列表显示混乱前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示
el-table组件使用fixed样式错乱问题
qq_40329458的博客
01-19 1332
数据折叠，错乱
el-table样式错乱解决方案
qq_71214810的博客
01-19 1700
如图所示，又被提bug了，这个bug我都不知道改了多少次了。。。 图片右边的椭圆框住的地方，在页面放大缩小之后就对不齐了。
el-table的样式错乱解决、支持跨页多选
qq_43901960的博客
01-29 669
el-table的样式错乱解决、支持跨页多选
Element el-table 表格内容 样式错乱的问题
小菜儿前端的博客
10-14 686
【代码】Element el-table 表格内容 样式错乱的问题。
el-tab切换导致el-table的部分样式错位
SDAW_1的博客
09-29 788
el-tab切换导致el-table的部分样式错位。
el-table 使用show-summary并指定height解决合计不显示后底部会出现空白区域
baidu_41682543的博客
03-14 1247
el-table 使用show-summary并指定height解决合计不显示后底部会出现空白区域
vue el-table 650个dom渲染很慢_【前端性能优化】vue性能优化
weixin_39949954的博客
02-03 2863
一、templatev-show，v-if 用哪个？第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if ，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show ，不频繁切换的使用 v-if ，这里要说的优化点在于减少页面中 dom 总数，我比较倾向于使用 v-if ，因为减少了 dom 数量，加快首屏渲染，至于性能方面我感觉肉眼看不出来切换的渲染过程，也不会...
基于element-ui el-table 开发虚拟列表(树形列表)
j_bleach的博客
06-21 9127
普通列表 主要方法：calcList <template> <div id="app"> <!-- :expand-row-keys="currentExpend" --> <!-- <div style="height: 800px"></div>--> <el-form ref="form" :model="form" label-width="80px" :rules="rules"
element表格之表头代码改进
S2763427717的博客
08-31 230
element表头代码改进
前端el-table 错乱问题解决
huatoudd的博客
08-03 1467
前端el-table的样式错位问题
elementUI中el-table表格的表头样式错位
keke11211的博客
08-20 1015
版本：element-ui 2.12.0 问题描述： 使用elementUI的el-table表格组件时，表格高度定高，内容过多时右侧会出现滚动条，然后就会出现如下图所示的列错位的样式： 解决办法： 在网上也找了好多方法，试了好多改样式的方式，都没有什么用，没有达到效果，最后还是采用js的 doLayout 方法，在获取到数据后重绘表格，实现了想要的效果。代码很简单，如下： templete中给表格设置 ref 属性： <el-table :data="table" ref=
el-table自定义合并单元格后，单元格错乱的问题
一步一个脚印_binding
11-16 5094
使用element时，当表格需要使用合计行时，可以使用show-summary属性使用element自带的合计行功能，但是当除了有合计行之外还有另一个类似合计行的时候，element自带的显然没法实现， 此时就需要自定义合计行的功能 如样式： 在el-table中:data绑定固定两行的空数据，用来显示合计行和价税统计行 然后自定义合并单元格的方法 此时会存在单元格错乱的问题 如图 解决办法，根据element官网介绍需要添加ret...
vue单页面多el-table表格样式冲突问题
weixin_39709920的博客
05-03 281
加入“key”，参数。
ElementUI的el-tabs标签页样式冲突问题
Aklcoming
08-12 1988
ElementUI的el-tabs标签页样式冲突问题 我这里是用一个标签页套入了另一个标签页，但是所有的最后一个都与其它的对不齐 这是官网代码，不多说，看一下大致逻辑 <el-tabs :tab-position="tabPosition" style="height: 200px;"> <el-tab-pane label="用户管理">用户管理</el-tab-pane> <el-tab-pane label="配置管理">配置管理&l
el-table写fixed 属性后，偶尔会出现样式错乱（已解决）
Beth__hui的博客
07-24 2159
对table 增加 ref=“multipleTable” 在请求数据后 增加 doLayout() 方法； .finally(() => { this.$nextTick(() => { this.$refs.multipleTable.doLayout(); }); });
el-table实现单元格合并，斑马纹错乱问题解决，鼠标上浮样式问题解决
yuishelly的博客
11-01 1496
el-table实现单元格合并，斑马纹错乱问题解决，鼠标上浮样式问题解决
elementui合并单元格出现的显示问题
cccchannge的博客
12-12 315
vue+element开发的项目,页面使用到了el-table组件的合并单元格方法:span-method
el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium如何去掉
最新发布
03-22
el-table是Element UI框架中的一个表格组件，el-table--fit、el-table--enable-row-hover、el-table--enable-row-transition、el-table--medium是该组件的一些样式类。如果你想去掉这些样式类，可以通过以下方式进行操作： 1. el-table--fit：该样式类用于使表格自适应父容器的宽度。如果你想去掉这个样式类，可以在el-table标签上移除fit属性，或者在样式中将该类的宽度设置为auto。 2. el-table--enable-row-hover：该样式类用于启用鼠标悬停行高亮效果。如果你想去掉这个样式类，可以在el-table标签上移除row-hover属性。 3. el-table--enable-row-transition：该样式类用于启用行过渡效果。如果你想去掉这个样式类，可以在el-table标签上移除row-transition属性。 4. el-table--medium：该样式类用于设置表格的中等大小。如果你想去掉这个样式类，可以在el-table标签上移除size属性，或者将该类的相关样式设置为其他大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值