前端收起与折叠功能

完成效果

默认折叠状态

点击展开按钮显示下方的表格

代码

<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>

实现

1. “表格信息”结构用disableTable属性默认false,zkfalg默认设置false
2. 点击按钮设置disableTable属性取反，设置zkfalg取反
3. showt设置样式为display：block,dist为display：none

    // 展开
    packupbtn() {
      this.disableTable = !this.disableTable;
      this.zkflag = !this.zkflag;
    },

是不是很简单？！你学会了吗？有用记得点赞哦！