Java教程

table切换加菜单栏显示隐藏动画

本文主要是介绍table切换加菜单栏显示隐藏动画,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

最近项目中刚好遇到需要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':'今天买了

	
这篇关于table切换加菜单栏显示隐藏动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!