快捷導(dǎo)航

Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開

更新時(shí)間：2023年01月18日 11:00:12 作者：suzhiwei_boke

這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Element折疊面板Collapse設(shè)置默認(rèn)全部展開

這個(gè)適用于需要for循環(huán) <el-collapse-item>

負(fù)責(zé)展開的屬性是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 只要是子元素的唯一屬性即可

這時(shí)會(huì)有一個(gè)bug，當(dāng)頁(yè)面有數(shù)據(jù)發(fā)生變動(dòng)時(shí)，這個(gè)折疊就會(huì)重新刷新，造成體驗(yàn)感變差的現(xiàn)象

Vue實(shí)現(xiàn)展開折疊效果

1、創(chuàng)建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>