treeGrid2.0 默认全部展开 已解决

[CuiWeiloong]

改的地方不多，

1、watch方法 监控items 添加了 一行 this.initItems = [] ，防止父组件里数据更新了，initItems数组不更新而是在后面添加

     items () {
      if (this.items) {
        this.initItems = []
        this.dataLength = this.Length(this.items)
        this.initData(this.deepCopy(this.items), 1, null)
        this.checkGroup = this.renderCheck(this.items)
        if (this.checkGroup.length == this.dataLength) {
          this.checks = true
        } else {
          this.checks = false
        }
      }
    },

2. initData 方法

// this.initItems = [] 注释掉

expanded 跟isShow 如果不在数据中指定，此处设置为了true

items forEach每次循环使用splice方法更新数组数据

  // 数据处理 增加自定义属性监听
    initData (items, level, parent) {
      // 1、之前全关闭此处没有注释掉，   'expanded': false     'isShow': false
      // this.initItems = []

      let spaceHtml = ''
      for (var i = 1; i < level; i++) {
        spaceHtml += "<i class='ms-tree-space'></i>"
      }
      items.forEach((item, index) => {
        item = Object.assign({}, item, {
          'parent': parent,
          'level': level,
          'spaceHtml': spaceHtml
        })
       // 2、
        if ((typeof item.expanded) === 'undefined') {
          item = Object.assign({}, item, {
            'expanded': true
          })
        }
        if ((typeof item.show) === 'undefined') {
          item = Object.assign({}, item, {
            'isShow': true
          })
        }
        if ((typeof item.isChecked) === 'undefined') {
          item = Object.assign({}, item, {
            'isChecked': false
          })
        }
        item = Object.assign({}, item, {
          'load': (!!item.expanded)
        })
        this.initItems.push(item)
        if (item.children && item.expanded) {
          this.initData(item.children, level + 1, item)
        }
        // 3、使用splice方法更新数组数据
        items.splice(index, 1, item)
      })
    },

[MrHuang123]

大佬，知道怎么显示图片吗？

[CuiWeiloong]

我也是萌新...，你说的显示图片是在img上加图片链接？这样的话应该可以显示吧

[dsnzts]

vue.runtime.esm.js:588 [Vue warn]: Error in callback for watcher "items": "RangeError: Maximum call stack size exceeded"

found in

---> <TreeGrid> at webapp\frontend\vue\components\treeGrid.vue <OaMenu> at webapp\frontend\vue\quanxian\menu.vue <App> at webapp\frontend\vue\admin\quanxian.vue <Root> warn @ vue.runtime.esm.js:588 logError @ vue.runtime.esm.js:1732 globalHandleError @ vue.runtime.esm.js:1727 handleError @ vue.runtime.esm.js:1716 run @ vue.runtime.esm.js:3230 flushSchedulerQueue @ vue.runtime.esm.js:2976 (anonymous) @ vue.runtime.esm.js:1832 flushCallbacks @ vue.runtime.esm.js:1753 Promise.then (async) microTimerFunc @ vue.runtime.esm.js:1801 nextTick @ vue.runtime.esm.js:1845 queueWatcher @ vue.runtime.esm.js:3063 update @ vue.runtime.esm.js:3204 notify @ vue.runtime.esm.js:694 reactiveSetter @ vue.runtime.esm.js:1011 proxySetter @ vue.runtime.esm.js:3295 (anonymous) @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:411 step @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:53 (anonymous) @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:34 fulfilled @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:25 Promise.then (async) step @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:27 (anonymous) @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:28 __awaiter @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:24 oaMenu.refreshPage @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:400 (anonymous) @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:391 step @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:53 (anonymous) @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:34 (anonymous) @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:28 __awaiter @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:24 (anonymous) @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:388 oaMenu.mounted @ menu.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:397 callHook @ vue.runtime.esm.js:2916 insert @ vue.runtime.esm.js:4149 invokeInsertHook @ vue.runtime.esm.js:5944 patch @ vue.runtime.esm.js:6163 Vue._update @ vue.runtime.esm.js:2665 updateComponent @ vue.runtime.esm.js:2783 get @ vue.runtime.esm.js:3137 run @ vue.runtime.esm.js:3214 flushSchedulerQueue @ vue.runtime.esm.js:2976 (anonymous) @ vue.runtime.esm.js:1832 flushCallbacks @ vue.runtime.esm.js:1753 vue.runtime.esm.js:1736 RangeError: Maximum call stack size exceeded at Object.reactiveGetter [as id] (vue.runtime.esm.js:982) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1616) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1609) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1620) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1620) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1609) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1620) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1620) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1609) at VueComponent.treeGrid.deepCopy (treeGrid.vue?./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0:1620)

[dsnzts]

我新增第三级就会报上面的错，这该怎么办呢？