vue-列表下详情的展开与折叠案例

这篇文章主要介绍了vue-列表下详情的展开与折叠案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

功能描述

1、默认折叠，点击时展示全部数据

2、点击A项，A展开，之后有两种情况：①再次点击A，A折叠；②点击其他项，如B，这时B展开，A折叠

解决方式

1、给展开折叠图标添加一个样式，显示成动画效果

 
 .arrow{ position absolute width: 0.6rem; height: 0.3rem; top 2.0rem right 0.8rem background url(../../../assets/images/icon_up.png-600) no-repeat background-size: 100% 100% transition: transform 0.3s -webkit-transition: transform 0.3s &.open{ transform : rotate(-180deg) } }

2、详情样式

...

3、方法详情

 // 展开与折叠 // 分析： // 1，showDetail默认为-1，第一次任意点击B，当前B对象展开，showDetail=index=n，此时有两种情况： // 情况1,再次点击B，showDetail===index，B关闭，showDetail=-1 // 情况2，点击B以外的其他对象C，先关闭B，在打开当前对象C foldAndUnfold(index,item){ if(this.showDetail===index){//两次点击的对象相同，关闭 this.showDetail = -1 }else{//点击的对象不同，先关闭前一对象，再打开当前对象 this.showDetail = index } }

补充知识： Vue table 点击按钮展开折叠面板

vue 实现的 table 折叠展开功能，由于工作中用到，这里把相应代码整理下，方便自己日后 Copy

1.Html 部分

由基本的 table 表单与折叠栏部分组成

PS：table 上需要加上 ref，以便方法中能够获取到 table 属性