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

原创 已于 2023-03-31 09:34:45 修改 · 610 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2023-03-31 09:31:11 首次发布
博客讲述在Vue界面中，两个Tab页使用同一封装列表组件，Tab页A的el-table有表头筛选，Tab页B无筛选，但从A切到B时B也出现筛选。解决办法是在el-table添加:key=\tableKey\，切换Tab时将tableKey设为随机数。

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

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

基于封装全局的el-table组件中添加过滤器
Dcripple的博客
03-20 1581
基于封装的el-table组件中添加过滤器，实现金额的格式化操作
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。 首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...
vue中使用elementUI使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结
weixin_42415158的博客
03-23 1万+
vue中使用elementUI使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结
VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据
热门推荐
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
09-21 2万+
实战场景描述 实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。 1、确定好每个Tab内容 参考官网的例子改成我们的内容就好 2、Tab切换事件 今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个T
关于Element-ui中el-table出现的表格错位问题
weixin_45786429的博客
06-13 6738
在使用element-ui中的el-table时，我们经常会用到fiexd属性，而使用了fixed属性之后，就会容易在各种场景出现表格错位的问题。在使用element中table组件的时候，有时候在部分不兼容的浏览器中，会出现以下表头和内容错位的情况。3.2 如果使用了keep-alive，可以在activated里执行doLayout方法。3.3 也可以通过监听路由，在watch里执行doLayout方法。附：解决element中el-table中表头和内容错位的方法。1、数据更新后出现的错位问题。
el-table数据展示错位
qq_50187801的博客
02-11 489
如果值发生改变，利用this.$refs.tableBox.doLayout()重新计算表格布局。调整表格展示之后出现空白的情况。
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中el-tab-pane切换的问题
10-15
在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI为el-table元素提供了直接设置高度（height）属性的方法，从而固定表头并实现内容的滚动。在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI...
el-table表头错位问题
Zyrzka的博客
03-12 714
情景：自己设置了el-table的height属性，数据较多时，表格出现滚动条，导致表头和表身有些错位 解决办法： el-table提供了重绘方法，只需在数据获取之后调用nextTick执行此方法执行之后就会对齐 this.$nextTick(() => { this.$refs.table.doLayout() }) 这样就ok了了了了了～ ...
element-ui 踩坑 table 表格动态添加筛选属性filters报错
卡卡罗特的博客
11-26 4605
element-ui table 表格动态添加筛选属性filters报错问题处理
el-table表格内容错乱
m0_62111953的博客
08-31 658
⽤tabs切换表格的时候，多个表格相互切换，⽤到了v-if和v-else-if，解决⽅法：给每⼀个el-table添加上key字段，即可。会出现表头和内容不对照，错乱的情况。
el-table filters用法
weixin_46733392的博客
04-02 1492
前端el-table 错乱问题解决
huatoudd的博客
08-03 1651
前端el-table的样式错位问题
el-table使用filters的过滤
weixin_52115201的博客
05-13 1207
在tabledata里面进行foreach组成filters的数组。合适使用的filterHandler，直接从官网复制过来就行。在data里面定义数组。
css中filter属性设置后导致页面定位失效
Bright2017的博客
10-12 1138
原因：当在标签中使用了 filter 属性后（body { filter: grayscale(1);）， filter 就会生成一个新的包含块，其位置大小和所在标签一样，然后 fixed 元素就会根据这个包含块进行定位，导致定位出现问题。问题：app上设置css的filter属性导致定位失效。解决方式：设置到html上即可。
element el-table 前端搜索 filter
weixin_45753961的博客
02-21 4147
效果： <template> <!-- 设置用户 --> <div class="SetUser"> <el-dialog title="设置用户" :visible.sync="visible1" width="35rem" center append-to-body> <el-input v-model="search" placeholder="搜索" style="margin-bottom:1rem;" maxl
el-table filter 实现多字段筛选联动功能
qq_41383241的博客
09-15 1736
1、按照el-table的filter使用方法绑定所有支持筛选的列，利用changeKey触发表格数据的变动，利用deptChangeKey、applyUserChangeKey触发过滤器的变动。（b）如果想要通过点击查询/重置/页码分页等来实现过滤器的筛选值重置，可利用table的ref属性，代码如下 ：（这个问题若没有出现则不需要使用此代码）（a）由于key的改变会使表格和过滤器不断刷新，从而导致进行了筛选操作但是筛选器图标并未着色，这就用到了el-table头部使用的isFilter。
el-table筛选方法使用
m0_59293086的博客
07-20 2460
单字段不需要使用some方法，多字段需要使用some方法。
el-table v-if导致多表头错乱
最新发布
09-24
<think> 首先，用户的问题是：“解决el-table使用v-if导致多表头错乱问题的方法”。基于提供的引用，我需要整理相关信息并给出解决方案。 关键引用概述： - 引用[1]：指出使用v-if在el-table-column中会导致位置错乱，示例代码中使用了v-if。 - 引用[2]：解释了v-if会销毁和重建元素，导致数据混乱。建议绑定:key="Math.random()"，但可能导致页面闪动。 - 引用[3]：提供了解决方案，通过添加唯一的key值来避免渲染错位。示例包括使用Math.random()或固定值，并提到如果抖动，改用固定值如数字或字符串。 用户提到了“多表头错乱”，但引用中没有直接提到“多表头”。我假设用户在使用el-table的多表头功能时遇到问题，但解决方案应该类似。 核心问题：在el-table-column中使用v-if可能导致列位置错乱，因为v-if会完全销毁和重建元素，破坏了DOM的顺序。 解决方案要点： 1. **避免使用v-if**：如果可能，改用v-show，因为v-show只是隐藏元素（设置display: none），不会销毁DOM结构。但v-show在组件中可能不支持或不理想。 2. **添加唯一key**：如引用[3]所建议，为每个el-table-column添加一个唯一的key属性。这可以帮助Vue正确跟踪和更新元素。 - 使用:key="Math.random()"，但可能引起页面闪动。 - 改为固定key值，例如:key="1"或绑定到一个不变的标识符如prop名称或索引。 3. **使用固定key**：为了避免Math.random()引起的闪动，推荐使用固定值，如字符串或数字，确保key的唯一性和稳定性。 4. **其他注意事项**：确保数据正确，key值不重复。 结构化回答： - 引言：解释问题原因。 - 解决方案步骤： - 建议添加key属性。 - 推荐使用固定key而不是随机值。 - 提供代码示例。 - 如果可行，建议使用其他方法如v-show或动态数据驱动。 - 结尾：生成相关问题。 回答要求： - 使用中文。 - 行内数学表达式用$...$（但这里可能不需要）。 - 独立公式用$$...$$（这里可能不需要）。 - 引用末尾添加标识：[^1], [^2], [^3]。 - 生成相关问题。 代码示例：基于引用[3]，提供修改后的代码。 最终回答结构： 1. 问题分析。 2. 解决方案。 3. 代码示例。 4. 相关问题。 </think> ### 解决el-table使用v-if导致多表头错乱问题的方法 在Vue.js中使用Element UI的el-table时，若在`<el-table-column>`上直接使用`v-if`动态控制列的显示/隐藏，可能导致表头和数据列错位（如图表头与数据不对齐、列位置错乱）。这是因为`v-if`会销毁并重建DOM元素，破坏表格的渲染顺序和内部状态[^1][^2]。以下提供已验证的解决方案，逐步解决该问题： --- #### **问题分析** - **根本原因**：`v-if`是条件渲染指令，当条件变化时，会销毁或重建整个列组件。这干扰了el-table内部对列位置的跟踪机制，导致多表头结构错乱[^2][^3]。 - **v-if vs v-show**：`v-show`仅切换CSS的`display`属性，不会销毁元素，更适合此场景。但`v-show`不支持直接用于`el-table-column`，因此需其他方法。 #### **解决方案** 1. **为每个列添加唯一key属性（推荐）** - 使用`key`属性强制Vue重新渲染列时保持正确顺序。避免使用`key="Math.random()"`以防止页面闪动[^2][^3]。 - 推荐固定key值（如字符串或数字），确保key唯一且稳定： ```vue <el-table-column label="受理日期" prop="acceptDate" :key="'acceptDate'" <!-- 绑定固定字符串key --> v-if="isTab1" /> <el-table-column label="生效日期" prop="effectDate" :key="'effectDate'" <!-- 确保key唯一 --> v-if="isTab2" /> ``` 2. **改用v-show（需结合外层容器）** - `el-table-column`不支持`v-show`，但可包裹在`<template>`中实现类似效果： ```vue <template v-if="isTab1"> <el-table-column label="受理日期" prop="acceptDate" /> </template> <template v-if="isTab2"> <el-table-column label="生效日期" prop="effectDate" /> </template> ``` 3. **优化多表头结构的建议** - **动态列生成**：避免直接在模板写`v-if`，改用`v-for`遍历列配置数组，并绑定唯一key： ```vue <el-table-column v-for="col in columnConfig" :key="col.prop" <!-- 使用prop作为固定key --> :label="col.label" :prop="col.prop" v-if="col.visible" /> ``` ```javascript // 在data中定义列配置 data() { return { columnConfig: [ { prop: 'name', label: '名称', visible: true }, { prop: 'age', label: '年龄', visible: true }, // 添加其他列... ] } } ``` #### **注意事项** - **key的选择**：优先使用固定值（如`prop`或自定义ID），而非`Math.random()`以减少页面抖动[^3]。 - **性能影响**：复杂多表头时，优先使用`v-for`绑定固定key，减少DOM操作开销[^2]。 - **兼容性**：Element UI版本需≥2.13.0，旧版本可能需升级库文件。 通过上述方法，可有效避免列错位问题，确保多表头渲染正常。若仍有异常，检查浏览器控制台是否有Vue警告（如重复key或prop错误）。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值