解决iview表格数据未加载出时暂无数据提示先渲染问题

最新推荐文章于 2024-03-16 22:14:04 发布
最新推荐文章于 2024-03-16 22:14:04 发布
阅读量902 收藏 1
点赞数
文章标签： view design servlet java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54089372/article/details/126659485
版权

问题：初始切入页面时，由于接口数据还没加载出来，会提前显示暂无数据的配置

 解决：

  • 设置变量noDataShow初始为false，当接口数据状态码为200时，设为true，不为200时列表data置空，则也为true。
  • :no-data-text利用三元表达式来控制是否渲染暂无数据提示。

最终实现：数据未加载完全时不显示暂无数据

 

 

 

热心市民111
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }, { title: '订阅名称', key: 'subscriptionName', minWidth:140 }, { title: '订阅ID', key: 'subscriptionId',
解决iview打包时UglifyJs报错的问题
10-18
下面小编就为大家分享一篇解决iview打包时UglifyJs报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iView表格（table）渲染，讲的太清楚了
最新发布
mm627mm的博客
03-16 1017
columns: [},],
vue+iview动态渲染表格详解
10-17
主要为大家详细介绍了vue+iview动态渲染表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用于iview 中 Cascader 级联选择的 省、市、县数据
09-28
使用于iview 中 Cascader 级联选择的 省、市、县数据 ，在项目中亲自测试过没有任何问题，使用如果有问题请联系
vue 强制组件重新渲染(重置)的两种方案
10-16
今天小编就为大家分享一篇vue 强制组件重新渲染(重置)的两种方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iview Table中自定义数据为空展示
heerey525
12-21 3729
需求：table中暂无数据时展示自定义缺省图和自定义文案 分析： 先找文档，有相关属性 no-data-text 数据为空时显示的提示内容 String 暂无数据 但是看了下no-data-text属性支持string类型，之前一直只是改改文案，用着是可以，但是图片加文字可以吗？存在疑问 解决： 3. 尝试用no-data-text属性加入html代码，（可行，遂不尝试其他方案了） <Table :no-data-text="`<img class='noImgUrl' src=
vue iview table中使用子组件，数据更新页面不渲染问题
进击的冉冉的博客
07-30 1729
在table 列中对时间进行特别处理时，页面不刷新，新数据进来时间渲染是前一条的数据，没有实时渲染 理论上当我更新数据的时候，createDate的值已经发生了改变，子组件应该获取的数据更新并重新渲染。实际上该页面的子组件只会保留第一次界面初始化的渲染页面。 修改前： <i-table width="100%" border ref="selection" :columns="columns" :data="suggestions"></i-table> 修改如下： 可
表格加载数据时，显示loading样式，并隐藏暂无数据字样
qq_46167326的博客
05-27 1017
先把表格为空时的数据设为空字符串，
iview 表格 暂无数据 展示缺省页
细节怪的博客
09-06 856
项目需求为：进入页面，初始加载数据（初始数据为空）时不展示缺省页，等调用接口，获取不到数据以后再展示缺省页图片。
iview的table中使用Poptip最后一项时出现滚动条异常或者内容显示不全
weixin_44679078的博客
06-21 1499
问题： iview的table中使用Poptip，点击更多展示poptip，但是最后一项时就出现滚动条，内容显示不全，拉动滚动条就一直在抖。 原代码： 解决方法： 给Poptip加上transfer属性
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧~ <input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ‘1888888888’; 这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”phone”,this.$route.query.mobile) 或者绑定到data里边的一个字符串，也是可以解决
iview table组件动态渲染，自定义表头以及动态绑定值
Codernmx
02-17 4984
自定义渲染 官网给了两种方式，render 和 slot-scope，之前用过element 好像是使用 template 的时候里边可以直接v-model 双向绑定表格的值，iview 里边直接使用 v-model 好像并不能 ，我这项目用的是 3.x的 后边的版本也没看。 使用slot-scope 自定义表格 动态绑定值，要结合on-change事件来设置，直接v-model="row.etd" 并不能改变表格里边每一行的值。 @on-change="setData($event, index
iview的table渲染及js修改伪元素的值
大哼的小世界
04-12 349
此处用的是iview的table组件，项目中要根据后端传过来的颜色值改变表格中小雨滴的颜色 { title: '颜色', key: 'nameColor', render: (h, params) => { this.oil_color=params.row.nameColor ...
解决 ViewUI 表格无数据时展示滚动条的问题
qwe122343的博客
12-25 948
如图所示，滚动条其实可以考虑去除，需要修改 ViewUI 的默认样式 .ivu-table-tip，将 overflow-x 的值由 auto 改成 hidden!important 即可 <style> .ivu-table-tip{ overflow-x:hidden!important; } </style> 清爽很多！ ...
iveiw table 渲染表头
weixin_43843679的博客
12-25 99
一、表头加提示 将表头columns.map item.renderHeader = h => { return h( 'Tooltip', { props: { placement: 'top', theme: 'light', t
解决vuex页面刷新数据丢失
博客
11-29 690
//全局监听，页面刷新的时候将store里state的值存到sessionStorage中，然后从sessionStorage中获取，再赋值给store。然后再把session里面存的删除即可，相当于中间件的作用。 //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$...
easyui datagrid 没数据时显示滚动条的解决方法
热门推荐
xiayingping的专栏
09-24 1万+
今天解决了一个bug，因为datagrid有多列，可是当没有数据的时候，后面的列无法通过滚动条拉动来显示，比较麻烦，而需求要求没有数据也要拉动滚动条查看后面有什么列，一开始在网上找了一些资料，发现都不可以，有一个实现生成空的table，也就是数据行，然后将其隐藏。 后来查看了一下，easyui datagrid中显示数据的区域是一个div，没有数据的时候没有滚动条，当时想找一些当div中
iview tabel表格开启树形数据卡顿的解决方法
09-10
当iview表格开启树形数据时，可能会出现卡顿的情况。解决这个问题的方法如下： 1. 数据量优化：如果树形数据量很大，可以考虑对数据进行优化处理，减少不必要的数据加载。例如，可以通过懒加载或分页的方式，只加载当前可见区域的数据，而不是一次性加载整个树形结构的数据。 2. 虚拟滚动：iview表格组件中的虚拟滚动功能可以用来优化树形数据的渲染和展示。通过设置合理的行高和总高度，以及可见区域的大小，可以减少不必要的DOM渲染，提高表格的性能。 3. 异步加载：如果树形数据较为庞大，可以考虑使用异步加载的方式，按需加载数据。可以通过监听表格的展开和折叠事件，在需要显示子节点时，再通过异步请求获取相应的数据，并进行渲染。 4. 数据缓存：对于经常被访问的树形数据，可以将其缓存在前端，以减少后续的网络请求。可以使用缓存插件，将经常使用的数据缓存在内存中，从而提高数据的读取速度。 5. 优化渲染逻辑：通过对树形数据的遍历和渲染逻辑进行优化，减少不必要的计算和DOM操作，可以提高表格的渲染性能。例如，可以使用缓存机制，对已经渲染过的数据进行复用，避免重复渲染。 综上所述，通过对数据量优化、虚拟滚动、异步加载、数据缓存以及渲染逻辑的优化，可以有效解决iview表格开启树形数据时可能出现的卡顿问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值