标签：动画 12 菜单栏 shangjia 2021 address date table id
最近项目中刚好遇到需要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':'今天买了
标签：动画,12,菜单栏,shangjia,2021,address,date,table,id
来源： https://blog.csdn.net/m0_46577631/article/details/122869644
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。