关于iview框架中tree组件动态渲染选中与过滤搜索的实现

最近因为项目的需要，研究了iview与element ui这两个框架，没有上手之前，很难有个比较，一度很喜欢iview，因为他确实代码很简洁，很多方面使用非常方便。

比如表格，表格的列中需要在js中简单的设置渲染就要以快速的形成表格。但是呢，说到表格，也不得不说，当数据量较大且数据children节点达到三级及以上时，渲染特别慢。这个在element ui与其他框架中，是没有的，而且他家的tree组件，展开收起也很丝滑。所以，这个应该是table组件本身的问题。

不小心跑题了，我们再说回tree组件，表现形势上，二者并无多大的区别，但是在提供的api上，element显明要牛逼些了，比如它可以直接通过组件的setCheckedNodes方法实现默认选中，通过filter方法实现搜索。而在iview中，这两个方法得自己现实现了。

下面我们就来聊一聊，iview框架中tree组件关于动态设置选中与filter过滤搜索的实现。首先要申明下，数据是无限级的，但是提供的源数据为三级。

iview框架tree组件动态设置选中

这个需求也可以理解成，不同条件的默认选中。实现原理其实也很简单，就是给数据加上checked属性，并将值设置成true。知道原理了，实现起来就不难了，不过要注意的是数据是无限级的，所以需要用到递归函数。

核心代码就是setChecked这个递归函数。有一点提醒的就是因为数据层级比较深，所以处理数据前最好做深度复制，不然会出现比较诡异的现象。比如，明明设置了选中，但是没有显示勾选，也无法点击勾选。最后展示下呈现结果。

iview框架tree组件动态数据过滤

对于这种数据量有一点大，从数据库搜索，显示不是明智的选择，在前端做数据过虑效率会更高一点。当前项目数据有800多条，层级最深为3级。

实现原理其实也很简单，就是根据搜索的关键词，把匹配的数据提出来，重新渲染就完成了。具体实现如下 。

这里也有一个递归函数，同样，考虑到数据层级较深，所以建议做尝试复制。另外需要提醒的是，将搜索结果全部民开。效果如下。

整体来感觉来看，效果还是不错的，非常流畅。

补充：需要说明的是，通过上述方法虽然搜索实现了，但是搜索后的选中数据与原来数据的合并，却有点问题了，具体可看后续的分析。