Vue使用Element折叠面板Collapse如何设置默认全部展开
作者:suzhiwei_boke
这篇文章主要介绍了Vue使用Element折叠面板Collapse如何设置默认全部展开,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。