完成效果
默认折叠状态
点击展开按钮显示下方的表格
代码
<div :class="disableTable ? 'showt' : 'dist'">表格信息</div>
<!-- 收起与折叠 -->
<div class="zy_jt">
<div class="b_pack" @click="packupbtn">
<div class="expand" v-if="zkflag == false">
<div class="arrow_r"></div>
</div>
<div class="packup" v-if="zkflag">
<div class="arrow_l"></div>
</div>
<span>
<i style="font-style: normal" v-if="zkflag">收起</i>
<i style="font-style: normal" v-if="zkflag == false">展开</i>
</span>详细资料
</div>
</div>
实现
- “表格信息”结构用disableTable属性默认false,zkfalg默认设置false
- 点击按钮设置disableTable属性取反,设置zkfalg取反
- showt设置样式为display:block,dist为display:none
// 展开
packupbtn() {
this.disableTable = !this.disableTable;
this.zkflag = !this.zkflag;
},
是不是很简单?!你学会了吗?有用记得点赞哦!