vue 折叠面板

调用父组件:

    <multilevel-accordion :tree="tree" :marginLeft="0">
      <template slot-scope="{ tree, interleaved, level, expanded, leaf }">
            <div class="tables">
              <div class="tits">
                <div class="titsLeft"><p>左上角</p></div>
                <div class="titsRight" ref="titsRight">
                  <div>
                    <p v-for="(item, i) in 50" :key="i">表头{{ i + 1 }}</p>
                  </div>
                </div>
              </div>

              <div class="tbody">
                <div class="tbodyLeft" ref="tbodyLeft">
                  <div>
                    <p v-for="(item, i) in 50" :key="i">首列{{ i + 1 }}</p>
                  </div>
                </div>
                <div
                  class="tbodyRight"
                  @scroll="scrollEvent($event)"
                  ref="tbodyRight"
                >
                  <div v-for="(item, i) in 50" :key="i" class="row">
                    <p v-for="(item1, i1) in 50" :key="i1">
                      {{ i + 1 }}-{{ i1 + 1 }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
      </template>
    </multilevel-accordion>

父组件:

<template>
  <div class="accordion-root">
    <ul class="list-root">
      <multilevel-accordion-children
        v-for="(child, index) in tree.children"
        :key="index"
        :tree="child"
        :position="index"
        :interleaveOffset="1"
        :reference="`${index}`"
        :level="0"
        :marginLeft="marginLeft"
      >
        <template slot-scope="_">
          <slot
            :tree="_.tree"
            :interleaved="_.interleaved"
            :expanded="_.expanded"
            :level="_.level"
            :leaf="_.leaf"
          ></slot>
        </template>
      </multilevel-accordion-children>
    </ul>
  </div>
</template>

<script>
import MultilevelAccordionChildren from "./MultilevelAccordionChildren.vue";

export default {
  props: {
    tree: {
      type: Object
    },
    marginLeft: {
      type: Number,
      default: 0
    }
  },
  components: {
    MultilevelAccordionChildren
  }
};
</script>

子组件:

<template>
  <div class="accordion-children">
    <li>
      <div class="accordion" @click="togglePanel()">
        <slot
          :tree="tree"
          :interleaved="interleaved"
          :expanded="expanded"
          :level="level"
          :leaf="leaf"
        ></slot>
      </div>

      <div
        v-if="!leaf"
        class="panel expandible panel-transition"
        :ref="`panel-${reference}`"
        :style="panelStyle"
      >
        <ul :style="`margin-left: ${marginLeft}rem;`">
          <multilevel-accordion-children
            v-for="(child, index) in tree.children"
            :key="index"
            :tree="child"
            :reference="`${reference}-${index}`"
            :ref="`childs-${reference}`"
            :position="index"
            :interleaveOffset="interleaveOffset + position + 1"
            :level="level + 1"
            :marginLeft="marginLeft"
            @updateHeight="updateHeight"
          >
            <template slot-scope="_">
              <slot
                :tree="_.tree"
                :interleaved="_.interleaved"
                :expanded="_.expanded"
                :level="_.level"
                :leaf="_.leaf"
              ></slot>
            </template>
          </multilevel-accordion-children>
        </ul>
      </div>
    </li>
  </div>
</template>

<script>
import MultilevelAccordionChildren from "./MultilevelAccordionChildren.vue";

export default {
  name: "multilevel-accordion-children",
  props: {
    tree: {
      type: Object,
    },
    reference: {
      type: String,
      required: true,
    },
    interleaveOffset: {
      type: Number,
      required: true,
    },
    position: {
      type: Number,
      required: true,
    },
    level: {
      type: Number,
      required: true,
    },
    marginLeft: {
      type: Number,
      default: 0,
    },
  },
  components: {
    MultilevelAccordionChildren,
  },
  data() {
    return {
      isShow: false,
      panelStyle: "",
      interleaved: ((this.interleaveOffset % 2) + this.position) % 2 == 0,
      expanded: false,
    };
  },
  methods: {
    togglePanel() {
      if (!this.expanded) {
        this.expand();
      } else {
        this.shrink();
      }
    },
    expand() {
      if (this.leaf) return null;
      if (!this.expanded) {
        let el = this.$refs[`panel-${this.reference}`];
        this.panelStyle = `max-height: ${el.scrollHeight}px;overflow: initial;`;
        this.expanded = true;
        this.$emit("updateHeight", el.scrollHeight);
      }
    },
    shrink() {
      if (this.leaf) return null;
      this.panelStyle = "max-height: 0px;overflow: hidden;";
      this.expanded = false;
    },
    updateHeight(childrenHeight) {
      if (this.expanded) {
        let el = this.$refs[`panel-${this.reference}`];
        this.panelStyle = `max-height: ${el.scrollHeight + childrenHeight}px;`;
        this.$emit("updateHeight", el.scrollHeight + childrenHeight);
      }
    },
  },
  computed: {
    leaf() {
      if (this.tree.leaf != undefined) return this.tree.leaf;
      if (this.tree.children == undefined) return true;
      return this.tree.children.length == 0;
    },
  },
};
</script>

<style scoped>
.accordion {
  text-align: left;
  display: flex;
}

.panel {
  max-height: 0;
  /* overflow: hidden; */
  
  
}

.panel-transition {
  transition: max-height 0.2s ease-out;
}
</style>