前端那些事20240118-前端那些事-页面展开收起逻辑

<div style="text-align: center;padding: 0 10px">
      <span class="explan-btn" v-if="!explan" @click="handleExplan"><i class="el-icon-arrow-down"></i>展开</span>
      <span class="explan-btn" v-if="explan" @click="handleExplan"><i class="el-icon-arrow-up"></i>收起</span>
    </div>

handleExplan () {
      this.explan = !this.explan
      this.$refs.crud.doLayout()
    },

<avue-crud
      class="avue-affixed avue-new-table hide-menu-header"
      ref="crud"
      :option="tableDetailOption"
      :table-loading="listLoading"
      :data="tableData"
      :page.sync="page"
      @refresh-change="refreshChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @search-change="searchChange"
      @filter-change="searchChange"
      @selection-change="selectionChange"
    >
      <template slot-scope="scope" slot="menu">
        <table-column-btns :btns="tableBtns" :scope="scope"></table-column-btns>
      </template>
    </avue-crud>