Vue使用Element折叠面板Collapse如何设置默认全部展开

目录

• Element折叠面板Collapse设置默认全部展开
• Vue实现展开折叠效果
• 总结

Element折叠面板Collapse设置默认全部展开

这个适用于需要for循环 el-collapse-item>

负责展开的属性是value

el-collapse :value="oPEned">
      el-collapse-ITem v-for="o in List" :key="o.aaa":name="o.aaa">
        div>
    XXXXXXXXXXXXXXXXXXXXXXXX/div>
      /el-collapse-item>
    /el-collapse>
     script>
  export default {
    data() {
      return {
           List:[               {
                    aaa:"123"               }
,               {
                   aaa:"354"               }
,               {
                   aaa:"asfdvg"               }
           ]      }
    ;
    }
,      computed: {
            opened() {
                    return this.List.map((i) =>
 {
                        return i.aaa;
                }
    );
            }
        }
,  }
    /script>
    

:name 只要是子元素的唯一属性即可

这时会有一个bug，当页面有数据发生变动时，这个折叠就会重新刷新，造成体验感变差的现象

Vue实现展开折叠效果

1、创建collapse.js文件 

const elTransition =  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
  "before-enter"(el) {
        el.style.transition = elTransition;
    if (!el.dataset) el.dataset = {
}
    ;
         el.dataset.oldPaddingTop = el.style.paddingTop;
        el.dataset.oldPaddingBottom = el.style.paddingBottom;
         el.style.height = 0;
        el.style.paddingTop = 0;
        el.style.paddingBottom = 0;
  }
,   enter(el) {
        el.dataset.oldOverflow = el.style.overflow;
    if (el.scrollHeight !== 0) {
          el.style.height = el.scrollHeight + "px";
          el.style.paddingTop = el.dataset.oldPaddingTop;
          el.style.paddingBottom = el.dataset.oldPaddingBottom;
    }
 else {
          el.style.height = "";
          el.style.paddingTop = el.dataset.oldPaddingTop;
          el.style.paddingBottom = el.dataset.oldPaddingBottom;
    }
         el.style.overflow = "hidden";
  }
,   "after-enter"(el) {
        el.style.transition = "";
        el.style.height = "";
        el.style.overflow = el.dataset.oldOverflow;
  }
,   "before-leave"(el) {
    if (!el.dataset) el.dataset = {
}
    ;
        el.dataset.oldPaddingTop = el.style.paddingTop;
        el.dataset.oldPaddingBottom = el.style.paddingBottom;
        el.dataset.oldOverflow = el.style.overflow;
         el.style.height = el.scrollHeight + "px";
        el.style.overflow = "hidden";
  }
,   leave(el) {
    if (el.scrollHeight !== 0) {
          el.style.transition = elTransition;
          el.style.height = 0;
          el.style.paddingTop = 0;
          el.style.paddingBottom = 0;
    }
  }
,   "after-leave"(el) {
        el.style.transition = "";
        el.style.height = "";
        el.style.overflow = el.dataset.oldOverflow;
        el.style.paddingTop = el.dataset.oldPaddingTop;
        el.style.paddingBottom = el.dataset.oldPaddingBottom;
  }
}
    ;
 export default {
  name: "collapseTransition",  functional: true,  render(h, {
 children }
) {
    const data = {
      on: Transition    }
    ;
        return h("transition", data, children);
  }
}
    ;
    

2、在.vue组件中引入

template>
        div class="container">
            button @click="isActive = !isActive">
    展开/折叠/button>
            collapse>
                div v-show="isActive">
                    div style="border:1px solid #ddd;
    padding:10px;
    ">
                    h2>
    欢迎大家品尝Pizza!/h2>
                    h5>
    这里有你非常喜欢的Pizza!/h5>
                    /div>
                /div>
            /collapse>
            div>
                666        /div>
        /div>
    /template>
    script>
    import collapse From "#/assets/js/collapse.js";
export default {
  data() {
    return {
      isActive: false    }
    ;
  }
,  components: {
    collapse  }
}
    ;
    /script>
    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue使用ElementUI时导航栏默认展开功能的实现
• Vant UI中van-collapse下拉折叠面板默认展开第一项的方法
• Element树形控件el-tree懒加载并设置默认展开和选中的效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！