前言

因为遇到需求，要写类似树形表格的功能，可以展开，收回。现在uniapp市场上又没有可以满足需求的组件。所以自己造了个轮子。展开收回就是用uView的collapse组件来改的。

按官方文档的说法，只要指定u-collapse的value为对应的collapse-item的name值。就是展开效果。

问题

以下是我写的表格界面，collapse默认值为空数组[ ]，也就是默认是全部收回的状态。 按道理来说我只要在mounted生命周期或者其他事件里，赋值collapse为[‘ldfz’,‘ldzc’]，那么我这里的流动资产和流动负债的面板就会展开。但是结果表明，我这样做没有*用。 只有我在初始值指定对应的name时，才有展开效果。再改变collapse数组，不会有任何效果。


试了多次后不行，就去看了源码。发现u-collapse.vue有两个watch监听。导致needInit监听被覆盖了。
我也去github搜了issue，也确实有人提到了这个问题，只是一直没有改。

无语了呀兄弟们~

解决办法

现在知道问题了就好办了。以下提供我想到的两种解决办法

修改源码

这也是最快速，最根本的解决方法。直接把u-collapse里的watch合并到一块，就能监听到needInit了

手动调用init方法

在不改源码的前提下，自己先改变collapse的值，然后调用this.$refs.collapse.init()方法，记得包裹在nextTick（）下，
否则第一次不更新。

 data() {
    return {
      isOpenAll: true, // 默认展开全部
      collapse: []
    }
  },
  computed: {
    collapse: {
      set(now) {
        console.log(now)
        return now
      },
      get() {
        let data = []
        if (this.isOpenAll) {
          this.tableData.map(i => {
            if (i.code) {
              data.splice(this.tableData.length, 0, i.code)
            }
          })
        }
        return data
      }

    }
  },
  mounted() {
    console.log('子组件', this.$refs.collapse)
  },
  methods: {
  	// 我这里是通过点击某个按钮来触发，具体逻辑自行实现
    changeCollapse(e) {
      this.isOpenAll = !this.isOpenAll
      this.$nextTick(() => {
        // nextTick延迟回调，否则第一次不更新
        this.$refs.collapse.init()
      })
      console.log('collapse', this.collapse)
    }
  }

总结

如果看了文档去使用组件，效果不出来，确定使用方法正确后，就应该去翻一翻源码，或者到github上搜issue。
就很有可能找到问题所在了。又是踩坑的一天~