element-ui中在多个tab切换之下的表格数据出现错乱

最新推荐文章于 2024-04-18 17:01:38 发布
最新推荐文章于 2024-04-18 17:01:38 发布
阅读量2.1k 收藏 3
点赞数 1
文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57082996/article/details/122107642
版权

当多个table切换使用了v-if后由于表格的长短不一，会出现数据错乱

比如table1中第一个列表是多选，table2中第一个列表是名称，但是使用v-if在切换到第二个table中时第一个列表显示的是多选

 解决办法：把v-if换成v-show

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留

m0_57082996
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tabs切换数据乱了,原来是竞态条件和数据竞争问题
梅花寺
10-26 651
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
element-ui表格数据转换的示例代码
10-18
主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
elementui[v-if切换不同表格，但内容却出现重复问题]
墨水白云的博客
02-23 1598
elementui[表格切换内容复用问题] 一个vue组件中出现两个表格，表格之间有字段内容完全一样，表格间通过v-if进行切换，结果出现两个表格字段错乱问题 解决方法：通过加上不同的key来区分两个表格 ...
【Vue2 + Element UI】 解决了关于el-table表格多选后，切换分页出现的多选状态回显不正确问题。请看详细解析！--前端
最新发布
2302_78387246的博客
04-18 665
【Vue2 + Element UI】 解决了关于el-table表格多选后，切换分页出现的多选状态回显不正确问题。请看详细解析！---- 前端
element-ui 表格组件 el-table 切换不同表格时或左右滑动时内容偏移的问题
qq_44774831的博客
04-10 1730
问题： 在项目的过程中，一个页面通过按钮切换不同的列表的时候发现有些列不在同一行了，会显得很拉垮，于是网上找了很多解决办法，最初想法也是应该是上一次加载的表格对下一次有影响… 那具体是怎么解决的呢？ 解决： 因为v-if 控制el-table-column 的渲染，则在v-if 切换的过程中造成表格数据的偏移， Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可： #直接在拉垮的地方添加一个key <el-table-c
vue + elementUI 表格相互切换时内容显示异常问题
lwx931449660的博客
01-28 3071
这次做项目的时候遇到需要再同一个页面切换展示多个table的需求，然而再完成之后遇到一个问题：表格之间切换的时候会出现内容消失和无辜出现的现象， 感觉对vue掌握的还不好，这里记录一下。 先奉上解决办法：Vue+ElementUI项目中条件渲染切换表格时单元格内容显示异常的问题及解决方法 在面试的时候，面试官 ...
Element el-select - 切换单多选时显示问题
老电影故事的博客
04-14 684
代码中使用了 v-if 安照常理，如果我切换了就会销毁，但是效果并不是这样，因为 vue复用了< el-select >中的input。也就是说根本原因是： vue 在切换的过程中，认为input不需要销毁重建，所以直接复用了。如何告诉vue 单选和多选不要复用呢？答案是 ----- 添加key 这里引用下官方文档。这里选择科目后，我再切换到柱状图，按道理是要这样。vue出于提高性能，所以 vue 给复用了。这是啥问题呢，一开始百思不得其解。
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
element-ui表格合并span-method的实现方法
10-16
主要介绍了element-ui表格合并span-method的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui 表格数据时间格式化的方法
12-02
在element-ui table 如何格式化呢  1.首先 代码如下:”AuditEndTime” label=”处理时间” width=”120″ formatter=”dateFormat” align=”center”>  主要是:formatter=”dateFormat” 这个属性  formatter...
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
vue element table 切换 数据错乱问题
阿妖的博客
11-16 2336
当多个table 使用v-if切换显示时. 并且表格的长短不一的情况下, 切换表格会出现排版和数据错乱 解决办法: 在对应的table 加上 key 属性就可以了. 还有一种情况是, 表格只有一个 但需要动态的改变数据, 就可能需要用到doLayout 方法 具体使用看element 官网的table项 ...
element ui表格点击整行选择_element-ui实现动态表头的表格问题汇总
weixin_39517902的博客
12-13 143
demo代码： el-table动态表头 {{tableBody[scope.$index][idx]}} 动态表格是生成列，也就是每一个然后再根据所有列去遍历生成行，这样一个过程，知道这些，要...
前端基础学习-tab嵌套表格错乱问题
小夭的博客
01-15 554
最近开发有遇到过一个问题，当我们把多个table页面作为嵌套到el-tabs下时，切换tab会有错乱问题（这里的现象是切换的一瞬间，所以列缩小到最小，页面出现大量空白）。 这里记录一下解决方法。 在table中绑定ref <el-table border :data="tableData" ref="table" > </el-table> 在对应mounted或者created中添加nextTick() this.$
el-table数据污染问题
qq_48039668的博客
11-24 434
el-table数据渲染时的污染问题解决 有的时候用一个表去渲染从后台传来的不同数据时，当数据发生改变，但表中的数据会被改变之前的数据污染，只需要加一个属性就解决了 给el-table标签上加一个row-key用来绑定数据，优化table的渲染。能轻松帮助我们解决数据污染问题 ...
tabs切换数据---多个tab页面使用一个data存储数据显示到el-table上,响应慢的请求数据覆盖掉响应快的数据
weixin_43502666的博客
10-15 783
2、当点击tab时可以将前面的请求cancel掉,使用axios中的方法:axios.CancelToken.source()方法会创建一个令牌,为每个tab请求添加入参{cancelToken:axios.CancelToken.source().token},每次点击按钮发送请求前,将存在令牌的请求cancel掉(this.cancelToken.cancel(“请求已取消”)😉。(3)this.$set(this.objData, index, ‘请求的结果’);//为存储结果的对象设置响应式属性。
Element-UI 的table使用v-if顺序会乱飞的问题
weixin_50488897的博客
10-19 736
table用v-if顺序乱掉
element-ui的table表格实现跨页多选及回显效果
关注最新技术问题并持续维护更新
07-20 4965
效果图 安装 Element-ui 和 egrid     基于 Element-UI Table 组件封装的高阶表格组件，可无缝支持 element 的 table 组件 npm i element-ui -S npm i egrid -S 引入 Element-ui 和 Egrid     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from
el-table 多个表格切换多选框显示bug
qq_57420582的博客
08-18 1783
解决方法，给有多选框的表格添加 :key="Math.random()" 或者 :key="1" :key="2" 写死也行。今天写了个功能，点击左侧的树做判断，一级树节点显示系统页面，二级树节点显示数据库页面，三级树节点显示表页面。在datasource（库页面）和table（表页面）之间切换，多选框一会在上，一会在下，数据库页面和表页面分别有2个el-table ,上面的没有多选框，下面的有多选框。
使用 element-ui 中制作Tab切换 俩个来回切换表格
05-25
你可以使用 element-ui 中的 Tabs 组件来实现 Tab 切换功能。具体步骤如下： 1. 首先，需要引入 Tabs 和 TabPane 组件： ```html <template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="表格1" name="table1"> <!-- 表格1的内容 --> </el-tab-pane> <el-tab-pane label="表格2" name="table2"> <!-- 表格2的内容 --> </el-tab-pane> </el-tabs> </template> <script> import { Tabs, TabPane } from 'element-ui' export default { components: { [Tabs.name]: Tabs, [TabPane.name]: TabPane }, data () { return { activeName: 'table1' } }, methods: { handleClick (tab) { console.log('点击了', tab.label) } } } </script> ``` 2. 在组件中使用 Tabs 和 TabPane 组件，并设置 label 和 name 属性，用于显示 Tab 的名称和标识。 3. 在 data 中定义 activeName 变量，用于记录当前激活的 Tab 的 name 值。 4. 在 Tabs 组件中使用 v-model 指令，将 activeName 绑定到 Tabs 组件上，实现 Tab 切换时自动更新 activeName 值。 5. 在 Tabs 组件上使用 @tab-click 事件监听器，监听 Tab 的点击事件，并在方法中实现对应的逻辑。 6. 在 TabPane 中编写对应的表格内容。 这样，你就可以实现一个简单的 Tab 切换组件了。如果需要在 Tab 切换时切换不同的表格内容，你可以在 handleClick 方法中根据 activeName 值来判断要显示的表格内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值