解决elementui 多个el-table切换样式错乱问题，以及doLayout的坑

最新推荐文章于 2024-05-16 10:55:32 发布
最新推荐文章于 2024-05-16 10:55:32 发布
阅读量8.5k 收藏 13
点赞数 15
文章标签： elementui vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43020925/article/details/120849455
版权

天坑的饿了么ui，最近有个需求需要在弹窗里做一个表格切换功能，但是多个表格进行切换时，样式会错乱

后面按照官方文档提示，通过再el-tabe上绑定个ref，然后使用doLayout这个方法解决
可是最后结果就是一直报错doLayout is not a function

最后发现只需要在每个el-table上绑定一个key属性，设置一个唯一的值就可以解决这个样式错乱的问题了，根本不需要用到doLayou这个坑爹的方法

<el-table :data="list1" key="table1" ></el-table>
<el-table :data="list2" key="table2" ></el-table>

就像上面那样，那个el-table标签上绑定一个唯一的key值，样式就不会错乱的，也不需要调用那个doLayou方法

weixin_43020925
关注
  • 15
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
umy-ui封装，支持虚拟加载
11-10
而super-ux-table则解决了这个问题，它只渲染屏幕可见部分的数据，其余数据则在需要时按需加载，从而实现高性能的滚动体验。 使用umy-ui的虚拟列表步骤如下： 1. **引入umy-ui**：首先，在项目中安装umy-ui，可以...
Ext JS Grid在IE6 下宽度的问题解决方法
12-04
解决方法： 1、修改ext-all.css，找到.x-grid3-header-offset，修改为.x-grid3-header-offset{padding-left:1px;/*width:10000px;*/width:auto;} 2、在grid中加入下面代码： 代码如下:monitorResize: true, doLayout...
el-table列表渲染时闪烁或者布局混乱的问题
weixin_54045596的博客
10-20 1144
element-ui提供了一个表格方法doLayout，可以使用该方法避免表格闪烁的情况。列表数据变化时，vue会重新计算列表高度宽度重新渲染，这个过程会导致列表闪烁。当列表数据发生变化时，例如刷新列表或者更改查询条件获取列表数据重新渲染列表。当列表数据发生变化时，下面的这个状态会一闪而过，然后恢复正常。
解决Element-ui的el-table出现的表格错位问题
热门推荐
卿本无忧的博客
05-19 1万+
在使用element-ui中的el-table时，我们经常会用到fiexd属性，而使用了fixed属性之后，就会容易在各种场景出现表格错位的问题。 查阅element-ui官网，发现官网提供了doLayout方法来解决这个问题 总结容易出现错位问题的几种场景及解决办法 1、数据更新后出现的错位问题 1.1 直接在数据赋值后执行doLayout方法 this.data = data; // 在数据更新后执行 this.$nextTick(() => { // myTable是
VUE+Element UI项目中使用el-table出现的内容块左右抖动问题解决方法_element-ui中table写的页面,页面抖动(2)
最新发布
fksdskjfzxklzk的博客
05-16 498
计算的列宽，并且有 v-if 或 v-show 来控制表格某一列的展示与隐藏，所以切换tab或者触发点击事件时使表格会被重新加载计算，从而出现抖动的现象。由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！页面渲染出表格以及表格中的所有内容，当触发表格中的自定义点击事件或者切换tab页时，表格里面的单元格和内容行就会发生左右或者上下抖动。由于表格中的 el-table 没有采用固定列宽，而是采用。如何判断一个单链表有环。
【解决】Vue elementUI table表格 列错位/滑动后切换每页显示数后错位/表格使用fixed后错位...
SummerGao
12-09 3259
table表格右侧列固定后，在切换页面之后，就会出现列错误的现象 <el-tab...
【elementUI】el-table表格相关问题及解决方法
SZnAl的博客
09-28 2024
切换显示隐藏后边框bug、给列表单独某一列增加排序功能、列错位/滑动后切换每页显示数后错位/表格使用fixed后错位、指定字段单元格样式及数据格式化
关于Element-ui中el-table出现的表格错位问题
weixin_45786429的博客
06-13 3886
在使用element-ui中的el-table时，我们经常会用到fiexd属性，而使用了fixed属性之后，就会容易在各种场景出现表格错位的问题。在使用element中table组件的时候，有时候在部分不兼容的浏览器中，会出现以下表头和内容错位的情况。3.2 如果使用了keep-alive，可以在activated里执行doLayout方法。3.3 也可以通过监听路由，在watch里执行doLayout方法。附：解决element中el-table中表头和内容错位的方法。1、数据更新后出现的错位问题。
springBoot整合kafka和elasticSearch,实现批量拉取日志以及批量更新到es里
01-15
1. **并行处理**：可以考虑使用多线程或者工作窃取模型，将批量拉取的数据分散到多个线程中处理。 2. **批量大小**：合理调整Kafka消费者和Elasticsearch的批量大小，过大可能导致内存溢出，过小则会影响性能。 3. *...
Vue 自适应高度表格的实现方法
10-15
为了解决这个问题，我们可以利用Vue的自定义指令（Custom Directives）机制。自定义指令允许我们扩展Vue的底层功能，对DOM元素进行更精细的操作。这里我们将创建一个名为`v-adaptive`的自定义指令，它能根据窗口大小...
element table固定头部兼容ie的滚动条样式自定义
04-09
element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，
extJs中关于formPanel动态添加组件的验证问题
04-13
一个FormPanel由多个字段（field）组成，每个字段都有自己的验证规则。这些规则可以是简单的非空检查，也可以是复杂的自定义验证。在FormPanel实例化时，我们可以直接在配置中定义这些字段及其验证规则。 但是，当...
使用 el-table 循环动态列表，窗口会出现抖动的问题
FitnessSnail的博客
10-16 912
使用 el-table 循环动态列表，窗口会出现抖动的问题
解决elenemtUi中使用el-tabs组件多个标签页切换el-table时，出现宽度压缩(缩小)的问题
qq_45404003的博客
07-28 2939
需要注意的是，doLayout() 方法只能在组件完全渲染后才能调用，否则可能会出现计算不准确的情况。解决方法就是使用el-table组件中的doLayout()方法是用来重新计算组件大小和位置的。当我们对组件进行动态修改后，可能会导致组件大小或者位置发生改变，此时可以调用 doLayout() 方法来重新计算并更新组件的布局。这样就会重新计算并更新表格的布局。
element-ui表格固定列错位
qq_40822000的博客
12-27 1万+
element-ui表格固定列错位 版本：element-ui 2.13.0 谷歌滚动条原因 在使用vue进行前端开发时，使用element-ui框架，当表格过高时出现滚动条，导致底部行错位，其原因是因为表格固定列的时候，鼠标滚动是内部计算的（详细信息看源码），所有需要改源码。谷歌浏览器会发生这种情况，火狐不会发生这种情况。 资源还在审核中。。。(链接后续补) 动态改变表格的宽高 当动态改...
el-table 表格错乱
JAVA5G的专栏
10-30 391
el-table 表格错乱
vue 中使用$refs，报this.$refs.xxx.xxx() is not a function
m0_67394360的博客
03-09 2130
this.$refs.xDown2.showPanel() 官网上例子时这么用的，我照着搬下来，竟然报上面的错误，找了好久也看不出哪里写错了，后来请假qq群里的大佬，得以解决。 打印console.log(this.$refs.xDown2),发现控制台打印的的dom对象是个数组，使用[0],得以解决上面的问题。 如this.$refs.xDown2[0].showPanel(); ...
记录：解决element中表格错位问题
cherry_hh的博客
01-27 944
文章目录具体使用的代码如下： element中提供doLayout的方法可解决 具体使用的代码如下： <el-table ref="listAll" :data="list_all" > </el-table> data(){ return { list_all:[] } } watch:{ list_all() { this.$nextTick(() => { this.$refs.listAll.
el-table中的doLayout 怎么用u-table替换
05-25
`el-table` 和 `u-table` 是两个不同的组件库，`u-table` 是由用友公司开发的基于 Vue.js 的组件库，而 `el-table` 则是由饿了么团队开发的基于 Element UI 的组件库。因此，两者的使用方法和接口是不同的。如果你想要使用 `u-table` 来替换 `el-table` 中的 `doLayout` 方法，需要先了解 `u-table` 的使用方法。 在 `u-table` 中，可以使用 `@update:height` 事件来监听表格高度的变化，然后手动触发组件的 `doLayout` 方法。具体实现代码如下： ```html <template> <u-table :data="tableData" @update:height="handleTableHeightChange"> <!-- 表格列 --> </u-table> </template> <script> export default { data() { return { tableData: [], // 表格数据 }; }, methods: { // 处理表格高度变化事件 handleTableHeightChange() { // 触发 u-table 组件的 doLayout 方法 this.$refs.table.doLayout(); }, }, }; </script> ``` 在上面的代码中，我们通过监听 `update:height` 事件来获取表格高度的变化，然后手动触发 `u-table` 组件的 `doLayout` 方法，从而实现与 `el-table` 中的 `doLayout` 方法相同的效果。需要注意的是，在 `u-table` 中，`doLayout` 方法是通过 `ref` 来引用组件并调用的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值