vue移动端项目中实现一个树

最近公司使用vue开发手机端项目，有个需求是实现派发树，网上找了半天没找到合适的。决定自己撸一个试试，要求多层级，层级不定而且。

正文

treeMenu.vue文件

复制代码

data就是派发树的内容，我们项目实际需要判断是否显示单选钮和多选钮，通过orgType 和mode判断，orgType 是每一条数据里的一项，mode是上一层传过来的数据信息。然后通过assignType判断是单选钮还是多选钮，当然assignType也是上一层调用树组件传过来的数据啦。
其中用到了一个知识点：v-on="$listeners"，用来监听多层级树中的事件。之前写的一篇文章有介绍该内容vue项目技术随笔，欢迎阅读。
一些相关的methods如下:

methods:{
  toggle (item, index) {
    item.nextSetActive=!item.nextSetActive;
    if (item.org==null ||item.org.length==0) {
      Indicator.open('加载中...');
      this.$emit('getsubmenu', item,()=>{
        Indicator.close();
      });
    }
  },
  radionToggle(item,data){
    data.forEach((e,index)=>{
      e.radioActive=false;
    });
    item.radioActive=!item.radioActive;
  }
}
复制代码

该移动端项目中使用了mintui作为ui框架，使用了其中的加载效果，点击展现下一层级的时候出现加载中，提升用户体验。toggle作用展示和隐藏下一层级，如果下一层级没有数据，需要触发动作去取数据，呈现加载中，取到数据后，回调函数，让加载中提示效果消失。
radionToggle方法就是实现单选钮的选中效果了，很简单。看一下最终的效果呈现：

具体的css就靠大家自己发挥了，不同的设计不同的css。最后推广下 自己博客,相关文章也会同步发布到博客，感谢大家的支持。