vue 递归组件实现多层嵌套

有个项目这个样的

 

需求就是点击这个红框的内容让一直这个样的(如下图)

就递归嘛。vue中有递归组件 自己调用自己嘛;代码再下面

 

vue怎么递归呢 其实就是定义一个name值

 

重点用红框圈住了主要是name值 。

其实跟递归函数一个样的 就像我判断是 v-if="item.filterTerm"(是否再调用)   传值是  :filterTerm='item.filterTerm'  

 

关于我的增加一个子节点、删除子节点、再递归一层  其实就是自己对数据的处理 记得用 Vue.set  不然数据虽然处理了 但是没有映射到界面