备案控制台
开发者社区 开发与运维 文章 正文

Vue3使用xlsx导出表格时获取不到最新数据

2023-08-01 79
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3使用xlsx导出表格时获取不到最新数据

可以使用nextTick来解决这个问题


原因分析


如果是再导出时更改了表格的数据，那么就造成表格的dom还没更新完毕

这时导出就已经开始了，所以xlsx获取到的表格渲染的还是数据更新前的状态，导出的excel表格也是更新前的数据


解决方法


import {nextTick} from 'vue'
const exportExcel= async () =>{
      //在nextTick之前更新数据
      await nextTick()
      //在nextTick之后进行导出
}
文章标签：
JavaScript
关键词：
数据VUE.js
vue3数据VUE.js
表格VUE.js
VUE.js数据
表格数据VUE.js
仙鹤童子```
目录
相关文章
你都不懂
|
2天前
|
JavaScript
在Vue中，子组件向父组件传递数据
【7月更文挑战第13天】
你都不懂
15 6
fruge365
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
fruge365
15 4
fruge365
|
4天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
fruge365
11 0
yqd666
|
10天前
|
JavaScript API
Vue数据动态代理机制的实现以及响应式与数据劫持
Vue数据动态代理机制的实现以及响应式与数据劫持
yqd666
11 0
fruge365
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
fruge365
16 6
小周sir
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点：** 分解大组件以提高复用性和加载速度；利用计算属性与侦听器优化数据处理；使用Object.freeze()减少响应式数据；借助Vuex或Composition API管理状态；实现虚拟滚动和无限加载提升长列表性能；路由懒加载减少初始加载时间；用Vue DevTools检测性能瓶颈；定期代码审查与重构；应用缓存策略；遵循最佳实践与团队规范，提升应用整体质量。
小周sir
10 2
fruge365
|
4天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
fruge365
10 1
fruge365
|
4天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
fruge365
15 1
Star时光
|
9天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架：组件化开发利于重用与扩展，响应式数据绑定简化状态管理；学习曲线平缓，生态系统丰富，集成便捷，且具性能优化手段。缺点包括社区规模相对小，类型支持不足（Vue 3.x改善），路由和状态管理需额外配置，SEO支持有限。随着发展，部分缺点正被克服。
Star时光
19 1
爱你三千遍斯塔克
|
9天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
爱你三千遍斯塔克
32 1