vue 多级嵌套数组渲染性能优化

最新推荐文章于 2024-07-05 16:41:23 发布
最新推荐文章于 2024-07-05 16:41:23 发布
阅读量3.6k 收藏 7
点赞数 1
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_dana/article/details/106077885
版权

最近遇见一个问题，移动端一个页面展示折叠展示数据，具体要展示多个区域，每个区域下面有不同业务人员，每个业务人员有自己的客户，每个客户又有不同的记录，即这个页面要渲染一个4层的数组。具体页面展示类似为：

1-区域数据

2-区域下属业务员及其客户数据

        拿到页面的时候，我想这不简单的么，不就是列表么，四层循环走起。页面先遍历区域进行渲染，然后再遍历区域内的业务员，再遍历业务员的客户，再遍历客户的记录，因为每层展开必须要一个字段进行记录，然后我就把获取的数据按照这四层遍历，每层加个isChecked进行记录展开状态。开始时本地数据比较少还ok，然后导入公司现有的业务员数据以后，哦豁！彻底卡死了，特别是页面还有相关的字段进行模糊查询，整个页面就是卡帧版的贞子，看着吓人呀！

        那怎么办呢，男人总不能说自己不成吧。于是开始审视自己的代码，然后找原因：

最低0.47元/天 解锁文章
chen_dana
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 多级嵌套示范
05-03
NULL 博文链接：https://lanyan-lan.iteye.com/blog/2428319
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
渲染出一个这样子的 表格 ： res 数据： res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板）， res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第...
【数组扁平化】vue数组多层嵌套拿到对应的值，数组扁平化方法
seeeeeeeeeee的博客
12-01 2268
比如我的需求就是在一个阴间结构内需要拿到我要的值 像这样的结构，嵌套的也不知道多少层，然后里面包含了需要的X和Y坐标。那需要拿到这个对应的坐标 let a = [3, [4], [5, [{ x: 1 }], [{ y: 1 }, [{ x: 2 }], [{ y: 2 }]]]]; 方法 let a = [3, [4], [5, [{ x: 1 }], [{ y: 1 }, [{ x: 2 }], [{ y: 2 }]]]]; let arr = Object.values(a)
vue多层循环，动态改变数据后渲染的很慢或者不渲染
qq_52317104的博客
09-13 1469
原因是因为vue检测速度很慢，因为多层循环了，在VUE 2.x的时候还能渲染出来，1.x的时候压根渲染不出来。 解决方式： 在动态改变数据的方法，第一行加上 this.$forceUpdate(); 就可解决渲染慢or渲染不出来的问题 ...
vue数组嵌套
weixin_42206151的博客
03-10 1530
转载csdn文章点击
使用ES6新增数组forEach、map等方法会修改原数组？深入浅出js的深拷贝和浅拷贝。
Vgbire的博客
03-05 6379
1、
一起学Vue之列表渲染
whyrookie的博客
08-14 133
在Vue开发中，列表数据绑定非常简单易用，本文主要通过一些简单的小例子，讲述v-for的使用方法，仅供学习分享使用，如有不足之处，还请指正。 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。如下所示： 1 <ul> 2 <li v-for="fruit in fruits"&g...
vue elementUI 表单校验功能之数组多层嵌套
12-08
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构： { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
基于vue-draggable 实现三级拖动排序效果
10-15
在实现三级拖动排序时，数据通常会是一个嵌套的对象数组，每个对象可能包含子对象，这些子对象又可能有其自身的子级。例如： ```javascript data() { return { listProductType: [ { id: 1, uuid: 'type1', ...
vue_ant-design-vue菜单递归
12-28
3. **递归渲染**：在Vue组件中，我们可以利用`v-for`指令和递归组件来渲染无限层级的菜单。首先创建一个递归组件`MenuNode`，它接收一个`MenuItem`作为props，并在自身内部渲染菜单项及其子项： ```javascript !...
vue中如何对多维数组进行渲染
weixin_43801564的博客
12-11 5916
在一些业务场景中，我们可能需要使用多维数组进行数据绑定，但是由于vue的响应更行机制，二维数组的数据更新可能不会触发视图更新。 解决方式 1、同时触发另外一个数据的视图更新 tip：step必须是存在于视图层上的data 2、使用$set的方式触发更新 ...
vue多层循环渲染慢or渲染不出来的问题
qq_37236241的博客
07-15 1190
参考文档（感谢）：https://blog.csdn.net/sunhuwh/article/details/98886712 原因是因为vue检测速度很慢，因为多层循环了，在VUE 2.x的时候还能渲染出来，1.x的时候压根渲染不出来。 解决方式： 在动态改变数据的方法，第一行加上 this.$forceUpdate(); 就可解决渲染慢or渲染不出来的问题 ...
动态多级别表头-数据渲染
weixin_54242901的博客
08-24 298
循环表头，将:label和:prop赋值，再循环children,数据的渲染就是scope每行数据对应的字段，记得先将表格数据转换成和prop对应的字段。2.渲染数据结构（changeLabel)的值。
微信小程序---365笔记第41天---多层数组的列表渲染
weixin_43779957的博客
06-30 392
记： 1.多层数组的列表渲染； 2.点击radio所在的行，也可以选中radio； 1.多层数组的列表渲染； 数据： data:{ name: { name: [ { '昵称': "夏天的列车" }, { '昵称1': "夏天的列车1"}, { '昵称2': "夏天的列车2"} ] } } wxml: <view wx:for="{{name.name}}" wx:for-index="idx" wx:for-item="item1">
【vue3 + element-plus】利用json数据进行动态路由渲染、动态多级菜单渲染
qq_36687211的博客
01-10 2463
利用json数据进行动态路由渲染、动态多级菜单渲染
vue里嵌套对象渲染报错的解决方法
sinat_41200024的博客
01-04 6965
在页面渲染时，我的数据是嵌套的对象，如下图： 页面运行时可以正常显示，可是可以看到控制台还是会报错，如下图： 最后发现只需在页面显示时加一个判断就不会再报错了，如下图： ...
HTML_表单 和 表单案例
最新发布
secret010的博客
07-05 276
【代码】HTML_表单 和 表单案例。
vue中的数组嵌套数组改怎么写
06-08
在 Vue 中，你可以像 JavaScript 中一样使用数组嵌套数组，例如： ``` data() { return { myArray: [ [1, 2, 3], [4, 5, 6] ] } } ``` 这将在 `data` 中定义一个 `myArray` 数组，它包含两个数组，每个数组...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值