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

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

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

这个适用于需要for循环 <el-collapse -i tem>

负责展开的属性是value

<el-collapse :value="o PE ned">
  <el-collapse- IT em v-for="o in List" :key="o.aaa":n am e="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文件&nbs p;

const elTransition =
  "0.3s h ei ght ease-in-out, 0.3s padding -t op 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;
  }
};
 
e xp ort default {
  name: "collapseTransition",
  functional: true,
  render(h, { children }) {
    const data = {
      on: Transition
    };
    return h("transition", data, children);
  }
};

2、在.vue组件中引入

<template>
    <div class="cont ai ner">
        <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
    };
  },
   component s: {
    collapse
  }
};
</script>

总结

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

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

总结

以上是 为你收集整理的 Vue使用Element折叠面板Collapse如何设置默认全部展开 全部内容，希望文章能够帮你解决 Vue使用Element折叠面板Collapse如何设置默认全部展开 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue使用Element折叠面板Collapse如何设置默认全部展开的详细内容...