- 博客(7)
- 收藏
- 关注
原创 【vue-okr-tree实现树图结构,含展开,收缩,导出图片,pdf】
横向展开数据结构修正代码,返回值eleNewArr为[ [] ,[], [] ]这样的二维数组结构,expandMap存放当前层级元素是否展开过,展开过为1,判断这个是因为有场景,用户仅点击最后一层减号,此时只有最后一层某个节点是收起来的,如果此时点击一键展开,不判断该层级是否已经全部展开过,此时还是会从第一层开始遍历,此时定时器仍会累加即时,等很久才渲染最后一层,这显示不是我们想看到的。另外考虑到不同的需求,可能要控制展开方向,横向展开(level),默认展开(dfs)。
2024-10-30 23:39:45 675
原创 eCharts图表柱状图改变堆叠顺序(从上往下)
原来的代码,注意这里res是传入进来的数据,当然格式自定义,color就暂时写死5种颜色。虽然这种需求很少,但还是有,那么笔者就简单实现一下这种效果,代码可以直接复制到eCharts官网运行~~(实现效果的代码,这里改了color采用动态分配符合数组长度的数组大小,不然reverse颜色乱套。eCharts图表柱状图的默认堆叠顺序是从下往上的,有时候与实际的需求不太匹配。效果实现,总之就是数据reverse,颜色reverse,代码在eCharts官网运行。然而,产品想要的效果是这样的,
2024-08-31 23:14:47 566
原创 虚拟列表的实现
1)数据初始化,data用来存储传进来的数据,这里我们自己使用随机函数生成高度数据,数组computedData是辅助数组,里面到i元素(包括自身)的累加高度,之后会用来修正高度,计算content(dom元素)该translate的距离。盗用一张很经典的图,我们用数组保存要渲染的数据,同时监听鼠标滚动事件,获取滚动的距离,通过相关计算我们计算出滚动距离下对应的数组对应的渲染的开始索引和结束索引,用slice方法截取出来得到新数组,把新数组渲染到页面。另外,需要注意的是,懒加载和虚拟列表也是有。
2023-05-26 20:38:48 4148 1
原创 2021-08-06
详细讲解JS for循环排他法中难理解的点。代码运行后,页面一加载出来,其实for循环就已经循环完毕了。那么外层的for有什么用呢?其实外层的for是给我们每一个按钮fu赋有点击发生事件属性,i=0时,就给第一个按钮btn[0]赋有点击发生事件属性,......,如此下去,i=5,退出循环,此时每一个按钮都具备点击发生事件属性。在其当中,不会触发点击事件处理程序代码,因为页面出来时,外层for已经执行完毕了,执行外层for时你点击不了按钮,不会触发点击事件处理程序代码。而当我们在页面点击..
2021-08-06 18:17:18 106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人