切换tab页之后, 列表的el-table表头的filter筛选错乱问题

已于 2023-03-31 09:34:45 修改
阅读量405 收藏 2
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-03-31 09:31:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/admin11196/article/details/129872162
版权

此时的场景是, 当前界面是有两个Tab页,
当前的Tab页A的要做成有列表表头filter的el-table,
Tab页B的做成没有filter的el-table,
而A和B的el-table用的都是同一个封装的列表组件,
问题是: B就算没写列表表头筛选的代码, 但是从A切到B的时候, 也出现了的表头筛选.
解决方法是: 在el-table写一个:key=“tableKey”,然后切换tab的时候, 把tableKey变成随机数,就解决了问题

在这里插入图片描述
在这里插入图片描述

刘刘刘刘刘~
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中使用elementUI使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结
weixin_42415158的博客
03-23 9278
vue中使用elementUI使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-table表格内容错乱
m0_62111953的博客
08-31 269
⽤tabs切换表格的时候，多个表格相互切换，⽤到了v-if和v-else-if，解决⽅法：给每⼀个el-table添加上key字段，即可。会出现表头和内容不对照，错乱的情况。
vue解决el-table表格中表头与内容错位问题
qq_59224836的博客
07-07 2072
解决当el-table里的内容比较多的时候以及el-table表格列固定左右滑动导致的表头与内容错位问题，直接在请求数据后执行表格自带属性doLayout方法重新加载table即可完美解决。
element-ui 踩坑 table 表格动态添加筛选属性filters报错
卡卡罗特的博客
11-26 2849
element-ui table 表格动态添加筛选属性filters报错问题处理
VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
09-21 1万+
实战场景描述 实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。 1、确定好每个Tab内容 参考官网的例子改成我们的内容就好 2、Tab切换事件 今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个T
table动态表头切换
weixin_42014928的博客
07-06 137
Vue前端：解决使用filter过滤器对数据结果进行过滤显示，过滤结果可能在前几页，即页码不会自动回到第一页开始显示的问题
qq_46119575的博客
03-05 1007
本文介绍了如何解决用filter过滤器可能会带来的一个问题：用户在搜索框中输入内容的时候，前端页面的显示内容会改变，但是底部的页码不会变，因此搜索的结果可能出现在前几页而不是当前页，用户还需要点击前面的页码去找想要的结果在哪一页。本文介绍了一种解决该问题的方法。
vue实现table分页以及用户手动筛选
weixin_42860747的博客
07-27 1058
vue实现table分页以及用户手动筛选 话不多说上预览图 由于没有与后端对接,所以这块的数据为假数据 功能点:用户可以对状态进行筛选 分页部分: <!-- 分页组件--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList ...el-table-c
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　2. cell-style 单元格的 style 的回调方法，也可以使用一...
element ui使用el-table时，切换tab原tab页刷新，且list列表发生错位问题
weixin_45001005的博客
08-09 2971
element ui切换tab页时，table的fix属性导致列表发生错位
Element技能点--el-table行列错位对不齐问题
热门推荐
程序员大阳
10-27 2万+
1. 问题表现 使用ElementUI的el-table后，偶然发现出现行列错位、对不齐问题。 还有一种列对不齐的，没找到截图，反正就是表格错乱。 2. 问题发现 实际上为了让表格可以垂直滚动造成的，添加了如下代码，对原生样式造成了影响。 .el-table { overflow-y: auto !important; } 3. 问题处理 直接在el-table外围添加一个div，然后固定div的高度让其垂直滚动即可。 ...
elementui中的tab标签通过某一页的按钮进行跳转、切换到不同的tab标题
ating_ing的博客
08-24 3522
在vue项目中使用elementui中的tab标签通过某一页的按钮进行跳转、切换到不同的tab标题
el-table切换页面或tabs记住滚动条位置
Fabricant的博客
05-16 1315
el-table切换记住滚动条位置
el-table-column :filters 多条件后台筛选全部数据分页处理
lMasterSparkl的博客
03-16 3808
1.问题描述 最终效果如下 将排序字段传入后台进行处理 需要通过筛选条件 不是排序 筛选全部后台数据而不是当前页数据 查找相关资料 2.解决过程 1.首先查找相关官方文档 发现是筛选当前页 这样只能前端进行分页及筛选才可以实现功能 如果数据量大的情况下很麻烦 2.查找相关博客资料 主要参考 参考资料2 博客链接 element ui table+分页 筛选全部数据-demo 3.最终代码 vue页面中放上部分关键代码 有些地方需要自行进行修改 <el-table border
elementui中el-tabs组件下的组件包含el-table，解决切换tab时table闪动问题
xiaobaige6084的博客
04-18 3009
起初为解决上述问题，使用了笨法，就是利用tabs组件的tab-click事件，在事件中调用table的doLayout方法，但是这么写比较繁琐，需要改动好几个地方，遂想优化一下，于是上网上查些资料，有人说直接table中追加key或者table-column中追加key，也有人说在pane中用if条件，但都达不到预期效果。偶然间想到一个办法，基本逻辑是通过自定义指令的方式调用表格的doLayout方法。
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 282
vite.config.ts配置。
el-cascader 怎么在切换tab页是清空 v-model
06-09
如果你在使用 `el-cascader` 组件时，需要在切换 `tab` 页时清空 `v-model`，可以通过监听 `tab` 切换事件，手动清空 `v-model` 的值。 具体实现方法如下： 1. 在 `el-tabs` 组件中监听 `tab-click` 事件，例如： ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值