改变el-table-columns数组的顺序后，视图不更新

最新推荐文章于 2024-07-25 09:37:37 发布
最新推荐文章于 2024-07-25 09:37:37 发布
阅读量829 收藏 1
点赞数 2
分类专栏： # 工作中遇到的坑 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41923266/article/details/127490356
版权

问题描述

使用el-table组件，通过v-for遍历列数据生成el-table-column，当改变列数据数组的元素顺序后，el-table并没有更新

代码解决

解决方法，先将列数据数组置为空，再将排序后的数据赋给它

    this.tableColumns = []
      this.$nextTick(() => {
        this.tableColumns = newTableColumns
      })
我只想卷死各位或者被各位卷死
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【VUE】提升大数据量场景下el-table组件的性能
九日的博客
04-23 2076
在现代Web应用程序开发中，使用Vue和Element UI快速构建高效的用户界面是非常普遍的做法。特别是对于需要展示大量数据的表格组件（），性能优化成为了不可忽视的关键。本文将逐一探讨几种提升Element UI表格性能的策略，并提供具体的实现代码，深入分析这些方法的工作原理。
elementUI表格el-table数据排序/更新后，不重新渲染（页面数据不更新）
zzjbj910的博客
05-16 1435
查看element文档，数据需要设置key，但是用el-table提供的row-key不太好用。这里预测是，前后数据内容一致，dom不更新，可能是为了提升页面性能。给table增加一个随机key，每次重新赋值tableData的时候，也传递随机key值，这样页面就可以重新渲染el-table了。前端页面选择重新排序，重新向后端请求数据，排序规则改变但数据内容不不变，表格数据不重新渲染。
解决el-table数据变化，视图不更新的问题
Cocoon_Xu的博客
05-09 678
今天在项目上要实现一个在表格里使用el-radio实现单选功能，遇到一个问题是选择不同行内的单选框时，其他行的radio状态不更新，如图：（左侧是正常效果，右侧为bug图）在网上查找类似问题，还尝试使用了this.$set()方法，这个方式看介绍是对数据进行响应式，就是解决直接改动数组并不能驱动视图更新的问题，但还是不生效，不知道怎么回事？此前，我尝试使用了this.$nextTick()方式，不生效，如果数据更新是异步进行的（例如通过API请求），确保更新数据后，使用Vue的。方法来等待DOM更新。
ElementUI，解决修改el-table中的数据，数据更新了但视图无法及时更新的问题
anqiaoyun的博客
07-24 592
ElementUI，修改el-table中的数据，视图无法及时更新的完美解决办法
el-table动态渲染列、可编辑单元格、虚拟无缝滚动
ngd-b的博客
05-01 1万+
针对日常开发的组件二次封装、方案设计实现。包括对el-table的动态渲染、单元格编辑；对于无缝滚动的实现，优化大数据量下的页面卡顿问题。 1. el-table实现动态渲染列 常规使用el-table <template> <el-table ref="multipleTable" :data="data" > <el-table-column prop="family_name" label="姓名" align="center">
解决el-table表格拖拽后，只改变了数据，表头没变的问题
weixin_42234899的博客
06-12 673
文章浏览阅读36次。对于列拖拽：点击某列的表头前后挪移时，松开鼠标左键后，挪移的列就应该在哪列显示。行拖拽：和列拖拽一样。eleplus对el-table表格进行拖拽(使用sortablejs进行列拖拽和行拖拽)：-CSDN博客。拖拽后表头不变的bug修复。
ElementUI - 表格组件（el-table）数据发生改变时视图不刷新渲染问题解决方案
王佳斌
06-18 1万+
前言 mqtt 做实时数据传输页面时，发现 数据变了但视图没变。 el-table 表格组件，每次只能监听整个 row 的变化，仅是 row 中某个属性变化无法追踪（需要重新给 table 中的某一行赋值）。 解决方案 vue.set() API（官方文档）：https://cn.vuejs.org/v2/api/#Vue-set 使用 vue.$set() 方法，触发视图更新即可。 /* * target: 要更改的数据源(可以是对象或者数组) * key：要更改的具体数据 * value ：重
elementUI 的 table 表格改变数据不更新问题
热门推荐
weixin_43299180的博客
04-28 2万+
预期效果：点击输入框旁边的图标，输入框变为可输入状态；这里控制输入的 editable 字段不是 data 原有的属性，也不是 data 赋值时就存在的字段。 问题原因：在 Vue 实例创建时，以及 data 赋值时 editable 并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新。 解决方法： 1、给 data 赋值前把 editable 属性添加到数组里 这里就不贴代码了，大概思路就是：获取到列表信息之后缓存在一个临时数组里（不可以是 data 里面定义好的对象），循环遍历
处理el-table大数据卡顿的问题，包含tree型数据格式
weixin_48463654的博客
08-21 3528
有时候el-table的数据可能有成千上万条，而且又要在一页显示完，这时候页面渲染的dom太多了，可能会造成页面卡顿。因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。具体原理可参考别的大佬写的文章：DOM性能瓶颈与Javascript性能优化.使用第三方插件 npmjs.com/package/pl-ta。解决方案：给表格固定高度，只渲染用户在表格中滚动的视图dom。解决思路可参考： 页面中长列表滚动的优化.
el-table使用fixed固定列以后，切换左右页面，列表显示混乱
qq_40247817的博客
01-06 802
el-table使用fixed固定列以后，切换左右页面，列表显示混乱前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
<el-table-column v-for="(col, index) in columns" :key="index" :label="col.label" :prop="col.prop" :sortable="col.sortable" :show="col.show"></el-table-column> </el-table> <el-dialog title="选择列" ...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
3. **生成Excel文件**：使用`xlsx-style`库（因为`file-saver`不支持直接生成Excel格式，而是CSV），将合并后的数据转换为Excel格式。首先安装`xlsx-style`： ```bash npm install xlsx-style # 或 yarn add ...
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList ...el-table-c
bootstrap-table-fixed-columns v1.22.3
03-13
为了部署这个更新，你需要将压缩包中的文件`bootstrap-table-fixed-columns-v1.22.3`解压，并按照官方文档的指引将其与Bootstrap Table库和相关依赖一起引入到你的HTML页面中。 总的来说，这个版本的更新是朝着提高...
bootstrap-table-fixed-columns.zip
01-14
"bootstrap-table-fixed-columns.zip" 是一个专为 Bootstrap Table 设计的插件，用于解决表格滚动时表头固定不动的问题，使得用户在浏览长表格时始终能清晰地看到列名。 FastAdmin 是一个基于 ThinkPHP5 开发的开源...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1023
本文介绍了电子签名、图片合成、及预览功能
vue3使用递归组件渲染层级结构
最新发布
weixin_42234899的博客
07-25 459
vue3使用递归组件渲染层级结构
Vue系列面试题
qq_44186810的博客
07-23 894
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
el-table-column遍历数组
10-17
可以使用 v-for 指令来遍历数组，然后在 el-table-column 中使用 prop 属性来绑定数据。例如： ```html <el-table :data="tableData"> <el-table-column v-for="column in columns" :key="column.prop" :prop=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值