使用element表格获取异步数据踩的坑

最新推荐文章于 2023-10-11 23:44:02 发布
最新推荐文章于 2023-10-11 23:44:02 发布
阅读量278 收藏
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anydw248/article/details/131385802
版权
当进行异步请求获取数据时，如果数据未准备好或者出现错误，可能导致表格无限加载。文章强调了在数据获取和渲染时应进行错误检查，例如确保res.row存在以防止错误，以及在渲染后端数据时添加兜底策略，因为单纯的try-catch可能无法解决表格loading状态的问题。正确处理这些问题能提升用户体验。
摘要由CSDN通过智能技术生成

如图 使用异步请求获取数据的时候，如果中间有错误的话，表格就会一直转圈，从而影响体验，这时候可以从几个方面来检查：

1，数据获取的时候：

这个表达式这样子写本身没有问题，可是如果res.row还没获取到呢，所以就会报出以上的错误，所以这时候为了保险可以采取这种方式

 这样子写就不会再报错了

 2，try catch 倒是可以让错误抛出，继续走下面的逻辑，但是表格的loading还是没有走到false，所以这个方案不行。

 所以大家在渲染后端传回来的数据的时候，一定要做一些兜底，不然就会报出一些奇怪的错误

anydw248
关注
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
小陈的博客
05-26 1万+
如果有同学还没用过这个功能，可以先了解下： 使用场景 大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。 解决方法 现在的 elementPlus 已经有虚拟化选择器了，直接使用，非常方便，如果你使用的是Vue3，可以直接移步 elementPlus官方文档 如
elementui 获取表格数据_Vue Element UI Table如何响应式数据转换
weixin_39706561的博客
11-21 581
前言在实际工作中，为了更好的适配业务需求以及更好的复用组件，我对前端Element UI进行了二次封装。其中一项就是对Element Table进行了封装。接下来我们就聊聊Element Table使用过程中，一种数据转化的方案。场景描述从后端返回的数据模型中，有个字段是关联其他表的id字典，举个简单的例子吧：有个用户信息接口:​/users/1 返回的结果：{ id: 1, name: ...
vue+element el-collapse动态获取后台传值
一起加油吧~
03-28 4386
vue+element el-collapse动态获取后台传值
父组件异步获取数据传给子组件获取不到
鲸落
03-09 1333
最近封装了个echarts图表的子组件,发现父组件中数据从接口获取后，传递给子组件时，在子组件的created函数中取不到，代码是这样的 父组件： <el-tabs v-model="attributeName"> <el-tab-pane label="用户数量" name="first"> <Charts v-if="attributeName === 'first'" :barData="bardatas.count" type="bar" /.
elementUI 表单校验在await中变成异步的情况
wuyxinu的博客
03-18 5602
引言 最近，在项目中遇到了一个问题。在表单校验中调用await方法，并调用接口，在得到接口的返回值时，返回一些数值给上一层函数。但是由于elementUI的表单验证内部的某些原因，导致本该是同步的方法变成了异步的。 直接上代码 按照正常的理解，这个地方应该是没有问题的，但是从结果上却是啪啪打脸。一直拿不到应该拿到的结果 而后自己写了个demo测试 async buttonTest() { let submitLess = false submitLess = await this.testTest(
vue3中两个el-select下拉框选项相互影响
DZQ1223的博客
09-21 855
label: '1月' ,label: '2月' ,label: '3月' ,label: '4月' ,label: '5月' ,label: '6月' ,label: '7月' ,label: '8月' ,label: '9月' ,label: '10月' ,label: '11月' ,label: '12月' ,disabled: false, } , ] //把方法和数据返回出去 return {
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
在本文中，我们将探讨如何使用Element UI库来实现表格嵌套以及多个表格共用一个表头的功能。Element UI 是一个基于 Vue.js 的组件库，它提供了丰富的UI组件，包括表格（el-table）等，用于构建美观且响应式的前端...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
当需要将表格数据绘制成图表且数据来源于后端接口时，可以使用 Vue 的 `axios` 或其他 HTTP 库异步请求数据。假设我们有一个 `getData()` 方法来获取数据，那么在请求成功后，可以更新 `setOption` 中的数据： ```...
vue实现日历表格（element-ui）
10-14
在Vue.js中，结合Element UI库来实现一个日历表格是一项常见的任务，这通常涉及到数据展示、日期处理和用户交互。以下将详细讲解如何利用Vue和Element UI来创建这样一个功能。 首先，`<title>`中提到的“vue实现...
前端使用element表格数据回显慢如何同步
最新发布
10-26
在前端使用Element UI的表格组件时，如果数据回显较慢，可能是由于以下几个原因导致的： 1. **大量数据加载**：如果你的数据集非常大，一次性加载所有数据可能会消耗较多时间。为了解决这个问题，可以考虑分页加载...
【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用
weixin_72997875的博客
10-11 618
在Vuex中，异步请求通常是指通过网络发送的异步操作，例如从服务器获取数据或向服务器发送数据。在Vuex中，可以使用异步操作来更新存储在状态库中的数据。常见的异步请求包括使用Ajax、axios等库发送HTTP请求，或者使用WebSocket进行实时通信。通过这些概念的配合，可以在Vuex中处理异步请求，并将响应的数据保存到状态库中，以便在应用程序中使用。Actions（动作）：Actions是Vuex中用于触发异步请求并提交mutation的地方。
Vue+ElementUI获取不到后台的数据（已排除Vue的原因）
lena blog
08-21 1632
此前已经排除了vue的问题。 （通过控制台打印结果正确、axios写的路径获取的到数据。） 问题： 在elementUI的表格代码中，想要遍历后台获取的信息（Page封装的），我采用了"v-for"和"{{}}"获取数据。如下： <!-- 显示文章--> <template> <el-table style="width: 100%" v-for="(passage) in pass
elementui表格展开行异步获取数据
weixin_45454281的博客
04-09 3152
elementui表格展开行异步获取数据，前端渲染elementui表格展开行问题原理如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 elementui表格展开行 应用场景 适用场景比较多,可做商品的详情展开或者其他嵌套内内容的展开。 需求场景点击第一列icon，调接
vue+elementui el-select选择框异步请求选项列表，$set之后显示的value值
weixin_44769310的博客
04-23 3721
场景 两个el-select 联动的选择框，选完第一个框异步加载第二个框的选项列表并给第二个选项赋值为选项的第一个值 <template> <el-select v-model="formData.data1" @change="onChange" > <el-option v-for="item in option1" :key="item.id" :l
解决Vue3+ElementPlus中table展开行，自动关闭且异步加载的问题
辞九门
06-27 1845
解决Vue3+ElementPlus中table展开行，自动关闭的问题
解决Vue异步请求中this为undefined以及mounted中获取不到data的数据的问题
Ekertree的博客
07-23 5818
获取路由参数的两种方式this.$route.params.id用于获取如下形式的参数路径/idthis.$route.query.xxx用于获取如下形式的参数路径?xxx=…注意在异步请求中的this不是注意data中的值由created中的异步请求获取并赋值的，mounted中要进行引用的话，可能异步请求中还未返回结果就被引用了。......
Element ui 使用el-table 的expand-change异步加载数据
MonkeyCatFox的博客
06-15 8302
Element ui 使用el-table 的expand-change异步加载数据 目录Element ui 使用el-table 的expand-change异步加载数据一、问题背景二、解决方案具体思路代码示例示例效果 一、问题背景   最近在写vue项目的时候需要用到element ui里面的table组件，并且由于需要展示的数据量较多，需要异步加载一部分数据。这里就需要用到el-table里面的 expand-change方法。但是在原生的加载方式在第一次点击展开栏的时候只是传输数据但是并没有
el-table 实现懒加载 异步获取的数据
monicateacat的博客
06-29 2026
tree参数表示当前位置节点信息的.需要查询吧tree参数的属性赋值一下就可以查询了.因为本身就是异步获取数据,有一定的时间差,当然加上也是完全没问题滴.那么我们自己从后端获取的数据有何变化,又如何写呢。伪代码附上,调用自己的api获取数据,即可.hasChildren 布尔值属性要有的,el-ui官网的懒加载栗子是固定写的数据。html部分可以完全拷贝,没有问题的.建议去除setTimeout部分。方法没错数据都可以正常展示的,重要的是数据的格式,
解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“
热门推荐
weixin_46433689的博客
05-30 24万+
问题描述：解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“ 问题解决： 情况一： 出现该错误的原因是因为你花括号中的某些属性未定义。很有可能是因为你写错了属性名称 情况二： 异步请求获取数据时，由于数据时异步获取的，所以一开始是没有该数据属性，这种情况下也会报这种错误。比如说我这里有一个数据detaildata，初始值为一个空对象。{{detaildata.name}}是不会报错的，但是，{{detaildata.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值