2018-11-06 vue-element-treetable使用展开和收起

1.需求：通过点击事件使treetable展开和收缩

image.png

通过点击展开按钮将treetable的数据放开，收缩相反
2.道具
借用 https://www.jianshu.com/writer#/notebooks/26491972/notes/36356347这里的插件
代码大体思路：
父组件

image.png

子组件
借用插件index.vue的代码思路
// 切换下级是否展开
toggleExpanded: function(trIndex) {
const record = this.formatData[trIndex]
record._expanded = !record._expanded
}

watch监听expandAll

expandAll(nVal) {
if (nVal) {
// 格式化数据源this.formatData，遍历此数据
this.formatData.forEach((record) => {
record._expanded = true
})
} else {
this.formatData.forEach((record) => {
record._expanded = false
})
}
}

image.png

后续：
但是以上的方法只能点击全部展开和全部收起有用处，如果需求要去以下两种，则
全部收起:

image.png

全部展开

image.png

父组件：

image.png

子组件

image.png

代码:
父组件：
case 'doAll'://点击事件 （全部展开）
// this.expandAll = "false2" 为第三者声明；
//第一次为引起变化，但是声明之后 子组件的判断条件为true 和false，之后则销毁
this.expandAll = "false2"
this.

nextTick过渡缓冲
this.expandAll = "true"
})

        break
      case 'doUp':（全部收起）
        this.expandAll = "false2"
        this.$nextTick(() => {
          this.expandAll = "false"
        })
        break

ps:找了很多方案，在组长的帮助下成功解决啦
后续也是组长给的方法解决了~~