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

第

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

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

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

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

负责展开的属性是value

el-collapse:value=opened

?el-collapse-itemv-for=oinList:key=o.aaa:name=o.aaa

??divXXXXXXXXXXXXXXXXXXXXXXXX/div

?/el-collapse-item

/el-collapse

script

?exportdefault{

??data(){

???return{

???????List:[

??????????{?

?????????????aaa:123

??????????},

??????????{

?????????????aaa:354

??????????},

??????????{

?????????????aaa:asfdvg

??????????}

???????]

???};

??},

???computed:{

??????opened(){

????????returnthis.List.map((i)={

??????????returni.aaa;

????????});

??????}

????},

/script

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

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

Vue实现展开折叠效果

1、创建collapse.js文件

constelTransition=

?0.3sheightease-in-out,0.3spadding-topease-in-out,0.3spadding-bottomease-in-out;

constTransition={

?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