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

目录Element折叠面板Collapse设置默认全部展开Vue实现展开折叠效果总结Element折叠面板Collapse设置默认全部展开这个适用于需要for循环el-collapse-item负责...

目录

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>

总结

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