vant的Collapse组件设置了isLink和readonly依然可以展开的问题

手机端的vantUI组件，van-collapse-item 在设置了isLink=false, readonly=true，并且没有设置内容的情况下依然可以展开。

想要的效果是没有内容就显示为列表的样式，有内容就显示为collapse的样式

image.png

直接修改style是没用的，因为官方就是通过修改style控制显示隐藏的，只能在class上下手：

样式：

<style lang="scss" scoped>
.hide_collapse_item {
  ::v-deep .van-collapse-item__wrapper {
    display: none;
    height: 0;
  }
}
</style>

van-collapse-item__wrapper就是展开面板的类名，现在将hide_collapse_item给到面板的父节点就行了。由于需要判断当前的 van-collapse-item 需不需要展开，所以选择在watch里通过style控制。

  watch: {
    isExport: {
      handler(val) {
        this.$nextTick(() => {
          if (!val) {
            // 不能展开，隐藏展开面板
            const parentDom = this.$refs.collapse.$el
            parentDom.classList.add('hide_collapse_item')
          } else {
            const parentDom = this.$refs.collapse.$el
            parentDom.classList.remove('hide_collapse_item')
          }
        })
      },
      immediate: true
    }
  },

因为我是将 van-collapse-item 单独做成组件了，所以这个样式只对当前的 van-collapse-item 生效，如果在 van-collapse-item 外面控制就需要遍历每一个item做一遍操作。