table切换加菜单栏显示隐藏动画
2022/2/10 23:20:43
本文主要是介绍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切换加菜单栏显示隐藏动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?