135  
查询码:00000156
iview踩坑记——树形控件
作者: 徐文斌 于 2020年02月27日 发布在分类 / 人防组 / 人防前端 下,并于 2020年02月27日 编辑

关于树形控件的问题

粘贴图片

粘贴图片

1、数据问题

iview的树形控件Tree的data数据结构是树结构的,如图

粘贴图片

但是,如果后端提供的数据不是上面的树形结构数据时

粘贴图片

前端需要对后端提供的数据进行“树形处理”,构造出下面这种数据形式的

粘贴图片

构造代码:

粘贴图片

//  从后端获取数据
      GetMenuTree({})
        .then(res => {
          this.menuData = res.data.result;
          this.menuData.forEach(item => {
            // 重组名称
            item.title = `${item.menuName} [路由:${item.menuPath}]`;
            // 构造树形数据
            this.childrenFun(item);
          });
          this.initSelectedTree(this.systemId);
        })
        .catch(err => {
          this.$Message.error("获取数据失败");
        });
    },
    childrenFun(data) {
      data.children.forEach(ele => {
        ele.title = `${ele.menuName} [路由:${ele.menuPath}]`;
        if (ele.children.length) {
          this.childrenFun(ele);
        }
      });
    },

2、:树形控件子级选中,父级默认展开功能

bug:父级无法默认展开,手动展开也不行

原因:给父级的expand赋值失败

解决方法:给父级的expand赋值要用$set

粘贴图片

3、树形控件点击勾选数据

bug:复选框状态不变

原因:初步判断是因为动态改变数据,dom没有重新渲染

解决方法:给复选框赋值要用$set

粘贴图片





 推荐知识

 历史版本

修改日期 修改人 备注
2020-02-27 11:47:33[当前版本] 徐文斌 iview树形控件
2020-02-27 11:46:22 徐文斌 iview树形控件

 附件

附件类型

JPGJPG PNGPNG

  目录
    知识分享平台 -V 4.8.7 -wcp