最近项目中刚好遇到需要table切换加菜单栏显示隐藏动画的项目刚好分享出来

代码部分

    <template>
    <div class="aside-content">
        <div class="aside-search-button-range">
              <span class="aside-search-button" :class="{'active':isopen}" @click="isopen=!isopen">
                    <i class="el-icon-arrow-right" style="color:black;font-size:20px"></i>
              </span>
              <div class="search-content-hot-box flex-col" :class="{'active':seleceted==='search'&&isopen}">
                  <div class="search-content-hot-title flex-space-bt-center">
                       <span class="search-container-hot-item" :class="{'active':tabSclected=='demo'}" @click="changeTab('demo')">模版事例</span>
                       <span class="search-container-hot-item hot-item-margin" :class="{'active':tabSclected=='common'}" @click="changeTab('common')">我的收藏</span>
                       <span class="search-container-hot-item" :class="{'active':tabSclected=='history'}" @click="changeTab('history')">历史问答</span>
                  </div>
              <div class="search-container-hot-list">
                  <div class="search-container-hot-list-item" v-for="(item,index) in hotList" :key="index" @click="hotDoubleClick(item)" :class="{'red':(item.countValue||item.seqNumber)<4}">
                    <i class="search-container-hot-list-item-num" :class="{'red':(item.countValue||item.seqNumber)<4}">{{item.countValue||item.seqNumber}}</i>
                    <span class="search-container-hot-list-item-content">{{item.ostensiveWord||item.favName||item.hisSearchWord}}</span>
                    <span v-if="item.favName" class="search-con-fav-close"><i class="elicon-close" @click.stop="hotDoubleClick(item,'delete')"></i></span>
                  </div>
              </div>
              <div class="search-container-hot-list-item-pagePrveBox">
                   <template v-if="hotList.length>0">
                       <div class="search-container-hot-list-item-pagePrveBox-left">
                             <span class="search-container-hot-list-item-pagePrve">{{currentPageIndex}}</span>
                             <span class="search-container-hot-list-item-pageNext">/ {{pageCount}}</span>
                       </div>
                       <div class="search-container-hot-list-item-pagePrveBox-right">
                             <span class="page-btn-box" @click="pageDataReq(-1)">
                                 <i class="el-icon-arrow-left pageBtn" :class="{'gray':beforBtnDisable}"></i>
                             </span>
                             <span class="page-btn-box" @click="pageDataReq(1)">
                                 <i class="el-icon-arrow-right pageBtn" :class="{'gray':afterBtnDisable}"></i>
                             </span>
                       </div>
                   </template>
             </div>
          </div>
        </div>
        <div class="box">
             <div class="search-content">
            <el-input placeholder="请输入条件查询" v-model="inputvalue"></el-input>
            <el-button type='primary' class="search-btn" @click="scarchinfo()">查询</el-button>
        </div>
        <div style="width:800px;margin-left:20px;margin-top:30px">
             <template>
              <el-table
                    class="tableBox"
                    :data="dataMap"
                    border
                    style="width:100%"
                    max-height="460px"
                    highlight-current-row
                    :header-cell-style="{background:'#d3dfeb',color:'black'}"
              >
                   <el-table-column
                               v-for="(item,index) in tableList"
                               :key="index+'tab'"
                               :label="item.label"
                               :prop="item.prop"
                               align="center"
                               :width="item.width"
                       >
                      
                   </el-table-column>
                   <el-table-column label="操作" align="center" v-if="this.dataMap.length>0">
                       <template v-slot="scope">
                                  <el-button @click="deletetable(scope.$index,scope.row)" type="danger" size="mini" >删除</el-button>
                       </template>
                   </el-table-column>
              </el-table>
              </template>
        </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
             seleceted:'search',
             isopen:true,
             tabSclected:'demo', //默认选中第一个
             hotList:[], // 数据
             currentPageIndex:1, // 默认当前显示第一页
             pageCount:0, // 数据条数
             beforBtnDisable:true,
             afterBtnDisable:true,
             inputvalue:'',
             tableList:[], // 表头数据
             dataMap:[] //表体数据
        }
    },
    methods:{
          changeTab(type){ // 切换tab页，默认页码为1，发送当前tab页数据请求
            this.tabSclected=type;
            this.currentPageIndex=1;
            this.pageDataReq(0)
        },
        hotDoubleClick(item,type){
              console.log(item)
              this.inputvalue=item.favName || item.ostensiveWord ||item.hisSearchWord
        },
         // 示例翻页数据请求 根据不同的type发送不同的请求
        pageDataReq(num){
        if(this.tabSclected==='demo'){
            if((num==-1 && this.beforBtnDisable==true)||(num==1 && this.afterBtnDisable==true)){
                  return;
            }
            this.examReq(num)
        }
        if(this.tabSclected==='common'){
            if((num==-1 && this.beforBtnDisable==true)||(num==1 && this.afterBtnDisable==true)){
                  return;
            }
            this.myColleReq(num)
        }
        if(this.tabSclected==='history'){
            if((num==-1 && this.beforBtnDisable==true)||(num==1 && this.afterBtnDisable==true)){
                  return;
            }
            this.hisReq(num)
         }
        },
        // 模版示例
        examReq(num){
          // 请求数据时把num拼接在this.currentPageIndex+num放到页码的借口里
          let examReq=[{'countValue':1,'ostensiveWord':'今天的天气很好'},
                       {'countValue':2,'ostensiveWord':'成都未来天气'},
                       {'countValue':3,'ostensiveWord':'12月热销汽车排行'},
                       {'countValue':4,'ostensiveWord':'2021年全球各国人数'},
                       {'countValue':5,'ostensiveWord':'iphone13全球售价'},
                       {'countValue':6,'ostensiveWord':'今天的天气沙尘暴'},
                       {'countValue':7,'ostensiveWord':'今天的天气暴雨'},
                       {'countValue':8,'ostensiveWord':'今天的天气晴朗'}]
          this.hotList=examReq
        },
        // 我的收藏
        myColleReq(num){
          let myColleReq=[{'seqNumber':1,'favName':'今天去吃火锅'},
                          {'seqNumber':2,'favName':'今天去吃串串'},
                          {'seqNumber':3,'favName':'今天去吃川菜'},
                          {'seqNumber':4,'favName':'今天去吃蹄花'},
                          {'seqNumber':5,'favName':'今天去吃烧烤'},
                          {'seqNumber':6,'favName':'今天去吃烤肉'},
                          {'seqNumber':7,'favName':'今天去吃羊肉汤'},
                          {'seqNumber':8,'favName':'今天去吃小吃'},]
          this.hotList=myColleReq
        },
       // 历史问答
       hisReq(num){
           let hisReq=[{'countValue':1,'hisSearchWord':'今天买了