1. 首页
  2. IT教程

我用Vue.js与ElementUI搭建了一个无限级联层级表格组件

前言

今天,回老家了。第一件事就是回家把大屏安排上,写作的感觉太爽了,终于可以专心地写文章了。我们今天要做的项目是怎么样搭建一个无限级联层级表格组件,好了,多了不多说,赶快行动起来吧!

项目一览

到底是啥样子来?我们来看下。

我用Vue.js与ElementUI搭建了一个无限级联层级表格组件

正如你所看到的那样,这个组件涉及添加、删除、编辑功能,并且可以无限级嵌套。那么怎样实现的?我们来看下。

源码

直接给出源码,就是这么直接。

代码可以直接拿来用,但是要注意事先要安装下ElementUI框架。无限层级的核心算法是递归算法,掌握了这一点,任何难题都可以解决。

下面,我们就这个项目来回顾下前端中的递归算法。

递归简而言之就是函数调用自己。递归算法中有两个条件:基线条件和递归条件。基线条件用于控制递归啥时候暂停,而递归条件是控制调用自己的方式。

最简单的一个例子是5的阶乘。

var func = function(i){    if(i === 1){        return 1;    }else{        return i*func(i-1);    }}func(5);

这样就很简单的实现了一个递归算法,我们将上述例子拆解下。

// 递5*func(4);5*4*func(3);5*4*3*func(2);5*4*3*2*func(1);// 归5*4*3*2*1;5*4*3*2;5*4*6;5*24;120

递归其实可以理解成两个操作递与归。可以这样比喻,比如你在做一道数学题时,有一个知识点你不懂,你需要查资料。但是,通过查资料你发现这个知识点中你又有另一个不明白的知识点,你又开始继续查,直到你没有不懂的知识点,这样递的操作已经完成。然后,你把已经查过的这些知识点又从尾到头复习了一遍,这样归的操作已经完成。最后,你明白了最初那个知识点。

原创文章,作者:夜风,如若转载,请注明出处:https://www.homedt.net/277577.html