用10行代码实现类似Element-ui里的tree树组件，以及一个有意思的小坑++i为什么与i+1不一样的详解

全端菜鸟小姐

于 2018-12-21 19:04:49 发布

阅读量1.1k

点赞数 2

分类专栏： Vue js 文章标签： Vue render

本文链接：https://blog.youkuaiyun.com/weixin_41845146/article/details/85168927

版权

本文通过10行Vue的render函数代码，展示如何实现一个Element-ui风格的树形组件，并深入探讨了一个关于++i与i+1在特定情况下的行为差异，揭示了在递归函数中++i导致作用域内变量意外改变的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文使用Vue的render函数，用10行代码的递归函数实现类似Element-ui里的tree树组件（如下图tree树），以及一个有意思的小坑++i为什么与i+1不一样的详解

因为平常 ++i 其实就是 i = i + 1,为什么本文的 ++i 跟别人的 ++i 不一样呢？？？

<script>
export default {
  data () {
    return {
      tree: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1',
                  children: []
                },
                {
                  label: '三级 1-1-2',
                  children: [
                    {
                      label: '四级 1-1-1',
                      children: []
                    },
                    {

最低0.47元/天解锁文章