无限树状列表的实现

树状列表示例效果.png

1. 无限级树形组件1

(1) 组件源码 tree-item.vue

(2) index.vue中调用

备注：uni-app使用vue递归组件做无限级树形列表时，在H5页面能正常显示（H5兼容递归组件本身），但是在微信小程序和android端只能显示第一级（小程序和安卓app无法递归）。该组件无法实现微信小程序和android端的树状列表，只能显示一级而无法展开下级列表。

2. 无限级树形组件2

(1) 组件源码mix-tree.vue

(2) index.vue中调用

备注：源码中的id和name字段需根据数据结构定义的字段名进行对应的修改。如网络获取的列表数据为：

 "departmentList": [
    {
      "name": "椒江新厂",
      "id": "001",
      "children": [
        {
          "name": "生产部门A",
          "id": "021",
          "children": [
            {
              "name": "A-01",
              "id": "031"
            },
            {
              "name": "A-02",
              "id": "032"
            },
            {
              "name": "A-03",
              "id": "033"
            }
          ]
        },
        {
          "name": "生产部门B",
          "id": "022",
          "children": [
            {
              "name": "B-01",
              "id": "034"
            }
          ]
        },
        {
          "name": "生产部门C",
          "id": "023"
        }
      ]
    },
    {
      "name": "杭州工厂",
      "id": "002"
    },
    {
      "name": "西安工厂",
      "id": "003"
    }
  ]

则源码mix-tree.vue修改为

备注：若无该if代码块的判断与处理if(rank == 0) {this.treeList = [];}，网络数据每刷新一次一级目录就会重复一次 。
index.vue修改为：

2.1 功能拓展 — 实现选中中间项

页面展示.PNG

说明：第二部分的无限级树形列表点击某个菜单会进行下级菜单的展开或收缩，最终只对最后一级的点击事件进行逻辑处理；若需求是实现每一个菜单项都能被选中，即中间菜单项不仅能实现展开或收缩子菜单，还要能实现当前中间菜单项自身被选中，此时可对第二部分的无限级树形列表的功能进行拓展。源码mix-tree.vue修改为：

主要新增代码为：

currentItemTap(item){
    let list = this.treeList;
    let id = item.department_id;
    console.log("currentItemTap:" + id);
    this.$emit('treeItemClick', item);
    return;
}

2.2 功能拓展 — 实现选中中间项实现默认列表子项全展开

• 主要新增代码为：

//liy:实现默认展开所有子级
this.treeList.forEach(childItem=>{
    childItem.show = true;
});

默认展开所有子级.png

问题：因为代表子级是否显示的标志位showChild默认为false（showChild: false），即默认所有子级都不显示；所以如果仅实现展开每个子级而不重新设置其父级的showChild标志位，那么第一次点击条目则不会收缩子项。
解决方案1：还需将标志位showChild默认设置为true（showChild: true）
解决方案2：

//liy:实现默认展开所有子级
this.treeList.forEach(childItem=>{
    childItem.show = true;
    //解决第一次点击条目不会收缩子项的问题(默认所有子级都不显示，所有这里要重新赋值),或者showChild默认值该为true即可
    if(childItem.rank != 0){
        this.treeList[childItem.rank -1].showChild = true;
    }
});

2.3 功能拓展 — 实现选中中间项实现默认仅展开第二级

在 2.2 功能拓展 — 实现默认列表子项全展开 的基础上修改代码：

//liy:实现默认展开所有子级
/**this.treeList.forEach(childItem=>{
    childItem.show = true;
    //解决第一次点击条目不会收缩子项的问题(默认所有子级都不显示，所有这里要重新赋值),或者showChild默认值该为true即可
    if(childItem.rank != 0){
        this.treeList[childItem.rank -1].showChild = true;
    }
});**/

//liy:实现默认仅展开第二级
this.treeList.forEach(childItem=>{
    if(childItem.rank == 1){//层级从0开始，1代表第二级
        childItem.show = true;//展开第二级
        this.treeList[0].showChild = true;//解决第一次点击条目不会收缩子项的问题（默认所有子级都不显示，所有这里要重新赋值）
    }   
});

默认仅展开第二级.png

。