el-tree数据懒加载渲染

image-20211014182521543

实现以上效果：

因为后台数据是不带 children嵌套数组方式的数据，所以根据 id来获取子集数据来渲染，要遵守element官方的数据格式

data: [
       { id: 1,label: '芷江侗族自治县',
          children: [
            { label: '公坪镇',children: [{ label: '公坪村' }] },
            { label: '三道坑镇',children: [{ label: '五郎溪乡' }, { label: '木叶溪乡' }] }
          ]
       }
]

获取到的数据格式如下：

image

上代码：

碰到的一些小问题：

/** 去除侧边栏展开折叠出现的x和y轴的滚动条 */
.el-aside::-webkit-scrollbar {
  display: none;
}

通过控制isCollapse的boolean值来决定是否侧边栏伸展

   导航
   


:collspae="isCollapse" (官方属性写法)

/** 树结构懒加载问题 */
el-tree标签上这两个搭配使用才能生效
lazy
:load="loadNode"
主要用到的请求到的数据搭配 resolve使用
loadNode(node, resolve) {}

受启发于：