最近项目中刚好遇到需要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':'今天买了🍍'},
{'countValue':2,'hisSearchWord':'今天买了🥭'},
{'countValue':3,'hisSearchWord':'今天买了🍓'},
{'countValue':4,'hisSearchWord':'今天买了🍌'},
{'countValue':5,'hisSearchWord':'今天买了🍎'},
{'countValue':6,'hisSearchWord':'今天买了🍉'},
{'countValue':7,'hisSearchWord':'今天买了🍈'},
{'countValue':8,'hisSearchWord':'今天买了🍇'},
{'countValue':9,'hisSearchWord':'今天买了🍑'},]
this.hotList=hisReq
},
// 控制翻页
handlePageSize(){
if(this.currentPageIndex == 1 && this.pageCount > 1){ // 当前页码为1，且总页码大于1，不能往左边翻页
this.beforBtnDisable = true;
this.afterBtnDisable = false;
}
if(this.currentPageIndex == this.pageCount && this.pageCount > 1){ // 当前页码等于总页码，且总页码大于1，不能往右边翻页
this.beforBtnDisable = false;
this.afterBtnDisable = true;
}
if(this.currentPageIndex == this.pageCount && this.pageCount == 1){ // 当前页码等于总页码，且总页码等于1，左右都不能翻页
this.beforBtnDisable = false;
this.afterBtnDisable = true;
}
if(this.currentPageIndex < this.pageCount && this.currentPageIndex !== 1){ // 当前页码等于总页码，且总页码等于1，左右都不能翻页
this.beforBtnDisable = false;
this.afterBtnDisable = true;
}
},
// 搜索按钮点击事件
scarchinfo(){
if(this.inputvalue==''){
this.$message('查询条件不能为空!')
}else if(this.inputvalue=='今天的天气很好'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'天气',prop:'tianqi'},
{label:'温度',prop:'wendu'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',tianqi:'晴朗 ☀️',wendu:'21'},
{id:2,date:'2021-12-12',address:'哈尔滨',tianqi:'大雪 ❄️',wendu:'-30'},
{id:3,date:'2021-12-12',address:'上海',tianqi:'晴朗 ☀️',wendu:'10'},
{id:4,date:'2021-12-12',address:'深圳',tianqi:'小雨 🌧️',wendu:'27'},
{id:5,date:'2021-12-12',address:'北京',tianqi:'大雪 ❄️',wendu:'-10'},
{id:6,date:'2021-12-12',address:'厦门',tianqi:'大雨 🌧️',wendu:'6'},
{id:7,date:'2021-12-12',address:'南京',tianqi:'小雪 ❄️',wendu:'-1'},
{id:8,date:'2021-12-12',address:'青岛',tianqi:'大雪 ❄️',wendu:'-18'},
{id:9,date:'2021-12-12',address:'天津',tianqi:'大雪 ❄️',wendu:'-19'},]
}else if(this.inputvalue=='成都未来天气'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'天气',prop:'tianqi'},
{label:'温度',prop:'wendu'},
];
this.dataMap=[{id:1,date:'2021-12-22',address:'锦江区',tianqi:'晴 ☀️',wendu:'21'},
{id:2,date:'2021-12-23',address:'武侯区',tianqi:'雾 🌫️',wendu:'20'},
{id:3,date:'2021-12-24',address:'金牛区',tianqi:'小雨 🌧️',wendu:'10'},
{id:4,date:'2021-12-25',address:'高新区',tianqi:'多云 ☁️',wendu:'20'},
{id:5,date:'2021-12-26',address:'温江区',tianqi:'晴 ☀️',wendu:'10'},
{id:6,date:'2021-12-27',address:'青羊区',tianqi:'晴转多云 ⛅️',wendu:'6'},
]
}else if(this.inputvalue=='12月热销汽车排行'){
this.tableList=[{label:'序号',prop:'id'},
{label:'厂商',prop:'manufactor'},
{label:'车型',prop:'name'},
{label:'单价',prop:'sale'},
{label:'销量',prop:'count'},
];
this.dataMap=[{id:1,manufactor:'北京奔驰',name:'奔驰E级',sale:'550000',count:'8061'},
{id:2,manufactor:'华晨宝马',name:'宝马5系',sale:'480000',count:'7692'},
{id:3,manufactor:'广汽本田',name:'本田雅阁',sale:'198000',count:'13987'},
{id:4,manufactor:'广汽丰田',name:'丰田凯美瑞',sale:'209999',count:'1028'},
{id:5,manufactor:'长安林肯',name:'林肯冒险家',sale:'210000',count:'8061'},
{id:6,manufactor:'小鹏汽车',name:'小鹏P7',sale:'270000',count:'3279'},
{id:7,manufactor:'理想汽车',name:'理想ONE',sale:'300000',count:'7908'},
{id:8,manufactor:'东风日产',name:'日产轩逸',sale:'109999',count:'12098'},
]
}else if(this.inputvalue=='2021年全球各国人数'){
this.tableList=[{label:'序号',prop:'id'},
{label:'国家',prop:'country'},
{label:'首都',prop:'capital'},
{label:'人口(亿)',prop:'people'},
{label:'GDP',prop:'GDP'},
];
this.dataMap=[{id:1,country:'中国 🇨🇳',capital:'北京',people:'14.12',GDP:'3'},
{id:2,country:'美国 🇺🇸',capital:'华盛顿',people:'3.12',GDP:'5'},
{id:3,country:'日本 🇯🇵',capital:'东京',people:'2.1',GDP:'3.1'},
{id:4,country:'德国 🇩🇪',capital:'柏林',people:'1.2',GDP:'4'},
{id:5,country:'英国 🇬🇧',capital:'伦敦',people:'1.6',GDP:'6'},
{id:6,country:'瑞典 🇸🇪',capital:'斯德哥尔摩',people:'0.5',GDP:'4.6'},
{id:7,country:'法国 🇫🇷',capital:'巴黎',people:'1.3',GDP:'3.5'},
]
}else if(this.inputvalue=='iphone13全球售价'){
this.tableList=[{label:'序号',prop:'id'},
{label:'国家',prop:'country'},
{label:'地区',prop:'address'},
{label:'型号',prop:'xinghao'},
{label:'销售平台',prop:'pingtai'},
{label:'价格',prop:'Price'},
];
this.dataMap=[{id:1,country:'中国 🇨🇳',address:'成都',xinghao:'iphone13',pingtai:'线上',Price:'5399'},
{id:2,country:'美国 🇺🇸',address:'洛杉矶',xinghao:'iphone13pro',pingtai:'门店',Price:'10399'},
{id:3,country:'韩国 🇰🇷',address:'首尔',xinghao:'iphone13 promax',pingtai:'门店',Price:'20399'},
{id:4,country:'新加坡 🇸🇬',address:'新加坡',xinghao:'iphone12 pro',pingtai:'门店',Price:'15399'},
{id:5,country:'阿联酋 🇦🇪',address:'迪拜',xinghao:'iphone13 promax',pingtai:'门店',Price:'7399'},
{id:6,country:'英国 🇬🇧',address:'伦敦',xinghao:'iphone13',pingtai:'门店',Price:'6399'},
{id:7,country:'瑞典 🇸🇪',address:'斯德哥尔摩',xinghao:'iphone13',pingtai:'门店',Price:'6599'},
{id:8,country:'巴西 🇧🇷',address:'里约热内卢',xinghao:'iphone13',pingtai:'门店',Price:'8399'},
{id:9,country:'德国 🇩🇪',address:'汉堡',xinghao:'iphone13',pingtai:'门店',Price:'7399'}]
}else if(this.inputvalue=='今天的天气沙尘暴'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'天气',prop:'tianqi'},
{label:'温度',prop:'wendu'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'内蒙古',tianqi:'沙尘暴',wendu:'1'},
{id:2,date:'2021-12-12',address:'北京',tianqi:'沙尘暴',wendu:'-10'},
{id:3,date:'2021-12-12',address:'张家口',tianqi:'沙尘暴',wendu:'10'},
{id:4,date:'2021-12-12',address:'呼和浩特',tianqi:'沙尘暴',wendu:'2'},
{id:5,date:'2021-12-12',address:'巴彦卓儿',tianqi:'沙尘暴',wendu:'-10'},
{id:6,date:'2021-12-12',address:'银川',tianqi:'沙尘暴',wendu:'6'},
{id:7,date:'2021-12-12',address:'吴中',tianqi:'沙尘暴',wendu:'-1'},
{id:8,date:'2021-12-12',address:'宁夏',tianqi:'沙尘暴',wendu:'5'},
{id:9,date:'2021-12-12',address:'兰州',tianqi:'沙尘暴',wendu:'-19'},]
}else if(this.inputvalue=='今天的天气暴雨'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'天气',prop:'tianqi'},
{label:'温度',prop:'wendu'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',tianqi:'暴雨',wendu:'21'},
{id:2,date:'2021-12-12',address:'广州',tianqi:'暴雨',wendu:'30'},
{id:3,date:'2021-12-12',address:'深圳',tianqi:'暴雨',wendu:'32'},
{id:4,date:'2021-12-12',address:'香港',tianqi:'暴雨',wendu:'27'},
{id:5,date:'2021-12-12',address:'北京',tianqi:'暴雨',wendu:'-10'},
{id:6,date:'2021-12-12',address:'福州',tianqi:'暴雨',wendu:'6'},
{id:7,date:'2021-12-12',address:'苏州',tianqi:'暴雨',wendu:'-1'},
{id:8,date:'2021-12-12',address:'杭州',tianqi:'暴雨',wendu:'5'},
{id:9,date:'2021-12-12',address:'天津',tianqi:'暴雨',wendu:'-19'},]
}else if(this.inputvalue=='今天的天气晴朗'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'天气',prop:'tianqi'},
{label:'温度',prop:'wendu'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',tianqi:'晴朗',wendu:'21'},
{id:2,date:'2021-12-12',address:'沈阳',tianqi:'晴朗',wendu:'-30'},
{id:3,date:'2021-12-12',address:'广州',tianqi:'晴朗',wendu:'10'},
{id:4,date:'2021-12-12',address:'香港',tianqi:'晴朗',wendu:'27'},
{id:5,date:'2021-12-12',address:'北京',tianqi:'晴朗',wendu:'-10'},
{id:6,date:'2021-12-12',address:'福州',tianqi:'晴朗',wendu:'6'},
{id:7,date:'2021-12-12',address:'苏州',tianqi:'晴朗',wendu:'-1'},
{id:8,date:'2021-12-12',address:'杭州',tianqi:'晴朗',wendu:'5'},
{id:9,date:'2021-12-12',address:'天津',tianqi:'晴朗',wendu:'-19'},]
}else if(this.inputvalue=='今天去吃火锅'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'蜀九香火锅',jiage:'900'},
{id:2,date:'2021-12-12',address:'成都',shangjia:'蜀大侠火锅',jiage:'530'},
{id:3,date:'2021-12-12',address:'成都',shangjia:'小龙坎火锅',jiage:'410'},
{id:4,date:'2021-12-12',address:'成都',shangjia:'大龙火锅',jiage:'627'},
{id:5,date:'2021-12-12',address:'成都',shangjia:'月满大江火锅',jiage:'610'},
{id:6,date:'2021-12-12',address:'重庆',shangjia:'朝天门火锅',jiage:'600'},
{id:7,date:'2021-12-12',address:'重庆',shangjia:'小宇火锅',jiage:'500'},
{id:8,date:'2021-12-12',address:'重庆',shangjia:'洞庭火锅',jiage:'530'},
{id:9,date:'2021-12-12',address:'重庆',shangjia:'渝味火锅',jiage:'640'},]
}else if(this.inputvalue=='今天去吃串串'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'秦大匠串串',jiage:'300'},
{id:2,date:'2021-12-12',address:'成都',shangjia:'袁记串串',jiage:'230'},
{id:3,date:'2021-12-12',address:'成都',shangjia:'巴蜀串串',jiage:'310'},
{id:4,date:'2021-12-12',address:'成都',shangjia:'牛记串串',jiage:'227'},
{id:5,date:'2021-12-12',address:'成都',shangjia:'厕所串串',jiage:'310'},
{id:6,date:'2021-12-12',address:'重庆',shangjia:'垃圾串串',jiage:'400'},
{id:7,date:'2021-12-12',address:'重庆',shangjia:'江边串串',jiage:'300'},
{id:8,date:'2021-12-12',address:'重庆',shangjia:'山城串串',jiage:'230'},
{id:9,date:'2021-12-12',address:'重庆',shangjia:'幺妹儿串串',jiage:'540'},]
}
else if(this.inputvalue=='今天去吃川菜'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'陈记麻婆豆腐',jiage:'300'},
{id:2,date:'2021-12-12',address:'成都',shangjia:'川菜印象',jiage:'230'},
{id:3,date:'2021-12-12',address:'成都',shangjia:'巴蜀记忆',jiage:'310'},
{id:4,date:'2021-12-12',address:'成都',shangjia:'人民食堂',jiage:'227'},
{id:5,date:'2021-12-12',address:'成都',shangjia:'鸡毛店',jiage:'310'},
{id:6,date:'2021-12-12',address:'重庆',shangjia:'山城江湖菜',jiage:'400'},
{id:7,date:'2021-12-12',address:'重庆',shangjia:'临江门食府',jiage:'300'},
{id:8,date:'2021-12-12',address:'重庆',shangjia:'渝味轩',jiage:'230'},
{id:9,date:'2021-12-12',address:'重庆',shangjia:'雾都印象',jiage:'540'},]
}else if(this.inputvalue=='今天去吃蹄花'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'老妈蹄花',jiage:'500'},
{id:2,date:'2021-12-12',address:'成都',shangjia:'巴蜀蹄花',jiage:'450'},
{id:3,date:'2021-12-12',address:'成都',shangjia:'川西蹄花',jiage:'510'},
{id:4,date:'2021-12-12',address:'成都',shangjia:'郫都蹄花',jiage:'427'},
{id:5,date:'2021-12-12',address:'成都',shangjia:'蓉城蹄花',jiage:'610'},
{id:6,date:'2021-12-12',address:'重庆',shangjia:'山城蹄花',jiage:'600'},
{id:7,date:'2021-12-12',address:'重庆',shangjia:'临江门蹄花',jiage:'500'},
{id:8,date:'2021-12-12',address:'重庆',shangjia:'渝味蹄花',jiage:'430'},
{id:9,date:'2021-12-12',address:'重庆',shangjia:'雾都蹄花',jiage:'640'},]
}else if(this.inputvalue=='今天去吃烧烤'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'何师烧烤',jiage:'100'},
{id:2,date:'2021-12-12',address:'成都',shangjia:'乐山烧烤',jiage:'130'},
{id:3,date:'2021-12-12',address:'成都',shangjia:'巴蜀烧烤',jiage:'110'},
{id:4,date:'2021-12-12',address:'成都',shangjia:'人民烧烤',jiage:'127'},
{id:5,date:'2021-12-12',address:'成都',shangjia:'巴适烧烤',jiage:'170'},
{id:6,date:'2021-12-12',address:'重庆',shangjia:'山城烧烤',jiage:'200'},
{id:7,date:'2021-12-12',address:'重庆',shangjia:'临江门烧烤',jiage:'100'},
{id:8,date:'2021-12-12',address:'重庆',shangjia:'渝味烧烤',jiage:'330'},
{id:9,date:'2021-12-12',address:'重庆',shangjia:'雾都烧烤',jiage:'440'},]
}else if(this.inputvalue=='今天去吃烤肉'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'姜东虎烤肉',jiage:'900'},
{id:2,date:'2021-12-12',address:'成都',shangjia:'雅丽家烤肉',jiage:'530'},
{id:3,date:'2021-12-12',address:'成都',shangjia:'巴蜀烤肉',jiage:'610'},
{id:4,date:'2021-12-12',address:'延边',shangjia:'延边烤肉',jiage:'627'},
{id:5,date:'2021-12-12',address:'首尔',shangjia:'棒子烤肉',jiage:'470'},
{id:6,date:'2021-12-12',address:'东京',shangjia:'岛国烤肉',jiage:'600'},
{id:7,date:'2021-12-12',address:'大阪',shangjia:'岛国烧鸟',jiage:'700'},
{id:8,date:'2021-12-12',address:'釜山',shangjia:'斯密达烤肉',jiage:'630'},
{id:9,date:'2021-12-12',address:'广州',shangjia:'粤语烤肉',jiage:'940'},]
}
else if(this.inputvalue=='今天去吃羊肉汤'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'简阳羊肉汤',jiage:'900'},
{id:2,date:'2021-12-12',address:'西安',shangjia:'清真羊肉汤',jiage:'530'},
{id:3,date:'2021-12-12',address:'银川',shangjia:'吴记羊肉汤',jiage:'610'},
{id:4,date:'2021-12-12',address:'兰州',shangjia:'特色羊肉汤',jiage:'627'},
{id:5,date:'2021-12-12',address:'宁夏',shangjia:'好吃羊肉汤',jiage:'470'},
{id:6,date:'2021-12-12',address:'新疆',shangjia:'乌苏羊肉汤',jiage:'600'},
{id:7,date:'2021-12-12',address:'内蒙古',shangjia:'草原羊肉汤',jiage:'700'},
{id:8,date:'2021-12-12',address:'重庆',shangjia:'雾都羊肉汤',jiage:'630'},
{id:9,date:'2021-12-12',address:'北京',shangjia:'帝都羊肉汤',jiage:'940'},]
}else if(this.inputvalue=='今天去吃小吃'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'成都',shangjia:'三大炮',jiage:'900'},
{id:2,date:'2021-12-12',address:'西安',shangjia:'肉夹馍',jiage:'530'},
{id:3,date:'2021-12-12',address:'东北',shangjia:'大酱绿化带',jiage:'610'},
{id:4,date:'2021-12-12',address:'山东',shangjia:'煎饼夹大葱',jiage:'627'},
{id:5,date:'2021-12-12',address:'长沙',shangjia:'臭豆腐',jiage:'470'},
{id:6,date:'2021-12-12',address:'武汉',shangjia:'热干面',jiage:'600'},
{id:7,date:'2021-12-12',address:'天津',shangjia:'煎饼果子',jiage:'700'},
{id:8,date:'2021-12-12',address:'重庆',shangjia:'重庆小面',jiage:'630'},
{id:9,date:'2021-12-12',address:'北京',shangjia:'北京烤鸭',jiage:'940'},]
}else if(this.inputvalue=='今天买了🍍'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍍',jiage:'200'},
{id:2,date:'2021-12-12',address:'泰国',shangjia:'莎娃迪卡🍍',jiage:'230'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍍',jiage:'210'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍍',jiage:'127'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍍',jiage:'170'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍍',jiage:'100'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍍',jiage:'200'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍍',jiage:'220'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍍',jiage:'120'},]
}else if(this.inputvalue=='今天买了🥭'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🥭',jiage:'300'},
{id:2,date:'2021-12-12',address:'泰国',shangjia:'莎娃迪卡🥭',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🥭',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🥭',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🥭',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🥭',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🥭',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🥭',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🥭',jiage:'120'},]
}else if(this.inputvalue=='今天买了🍓'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍓',jiage:'300'},
{id:2,date:'2021-12-12',address:'云南',shangjia:'云南🍓',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍓',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍓',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍓',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍓',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍓',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍓',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍓',jiage:'120'},]
}else if(this.inputvalue=='今天买了🍌'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍌',jiage:'300'},
{id:2,date:'2021-12-12',address:'云南',shangjia:'云南🍌',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍌',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍌',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍌',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍌',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍌',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍌',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍌',jiage:'120'},]
}else if(this.inputvalue=='今天买了🍎'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍎',jiage:'300'},
{id:2,date:'2021-12-12',address:'云南',shangjia:'云南🍎',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍎',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍎',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍎',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍎',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍎',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍎',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍎',jiage:'120'},]
}else if(this.inputvalue=='今天买了🍉'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍉',jiage:'300'},
{id:2,date:'2021-12-12',address:'云南',shangjia:'云南🍉',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍉',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍉',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍉',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍉',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍉',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍉',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍉',jiage:'120'},]
}else if(this.inputvalue=='今天买了🍈'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍈',jiage:'300'},
{id:2,date:'2021-12-12',address:'云南',shangjia:'云南🍈',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍈',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍈',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍈',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍈',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍈',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍈',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍈',jiage:'120'},]
}else if(this.inputvalue=='今天买了🍇'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍇',jiage:'300'},
{id:2,date:'2021-12-12',address:'云南',shangjia:'云南🍇',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍇',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍇',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍇',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍇',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍇',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍇',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍇',jiage:'120'},]
}else if(this.inputvalue=='今天买了🍑'){
this.tableList=[{label:'序号',prop:'id'},
{label:'日期',prop:'date'},
{label:'地区',prop:'address'},
{label:'商家',prop:'shangjia'},
{label:'价格',prop:'jiage'},
];
this.dataMap=[{id:1,date:'2021-12-12',address:'菲律宾',shangjia:'菲利🍑',jiage:'300'},
{id:2,date:'2021-12-12',address:'云南',shangjia:'云南🍑',jiage:'330'},
{id:3,date:'2021-12-12',address:'马来西亚',shangjia:'马来🍑',jiage:'310'},
{id:4,date:'2021-12-12',address:'台湾',shangjia:'台湾🍑',jiage:'227'},
{id:5,date:'2021-12-12',address:'海南',shangjia:'海南🍑',jiage:'70'},
{id:6,date:'2021-12-12',address:'广州',shangjia:'广州🍑',jiage:'200'},
{id:7,date:'2021-12-12',address:'越南',shangjia:'越南🍑',jiage:'100'},
{id:8,date:'2021-12-12',address:'广西',shangjia:'广西🍑',jiage:'320'},
{id:9,date:'2021-12-12',address:'缅甸',shangjia:'缅甸🍑',jiage:'120'},]
}
},
// 表格表体数据插入
getDataName(scope,items){
return scope[items.code]
},
// 表格删除事件
deletetable(index,data){
this.dataMap.splice(index,1)
}
}
}
</script>
<style>
.aside-content{
display: flex;
}
.aside-search-button-range{
height: 100%;
position: relative;
cursor: pointer;
min-width: 22px;
}
.aside-search-button-range:hover .aside-search-button{
visibility: visible;
}
.aside-search-button{
position: absolute;
visibility: hidden;
top:calc(50% - 75px);
background:#eee;
height: 150px;
width: 20px;
text-align: center;
color: #fff;
line-height: 150px;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.aside-search-button.active{
transform-origin: 50% 50%;
}
.aside-search-button.active i{
transform: rotate(180deg);
}
.aside-search-button:hover{
width:25px;
transition: all .1s ease-in;
}
.search-content-hot-box{
width: 0;
visibility: hidden;
transition: all .2s ease-in;
flex:1;
margin-left:12px;
background-color: #fff;
border:1px solid #ccc;
border-radius: 8px;
padding:0 8px;
margin-top:20px
}
.search-content-hot-box.active{
width: 380px;
visibility: visible;
border-right:5px solid #eee;
transition: all .2s ease-in;
}
.flex-col{
display: flex;
flex-direction: column;
}
.flex-space-bt-center{
display: flex;
justify-content: space-between;
align-items: center;
}
.search-content-hot-title{
margin-bottom:10px;
width:100%;
height:40px;
line-height:40px;
border-bottom:1px solid #eef1f8;
font-size:16px;
background:#f9f7f6 ;
}
.search-container-hot-item{
flex:1;
background:#e2e7ef ;
text-align: center;
border-radius: 10px 10px 0 0;
}
.hot-item-margin{
margin:0 2px
}
.search-container-hot-item.active{
background:#fff ;
font-weight:bold;
}
.search-container-hot-item:hover{
cursor: pointer;
color: #337eed;
}
.search-container-hot-list{
width:100%;
margin-top:8px;
flex:1;
padding-top:6px;
max-height: 440px;
overflow:auto
}
.search-container-hot-title{
margin-bottom:10px;
width:100%;
height:40px;
line-height:40px;
border-bottom:1px solid #eef1f8;
font-size:16px;
background: #f9f7f6;
}
.search-container-hot-list-item{
display: flex;
width:94%;
border-radius: 4px;
padding-top:10px;
padding-bottom:10px;
background-color: #f9f9fb;
margin-bottom:8px;
color:#404364;
white-space: normal;
word-wrap: break-all;
overflow: hidden;
transition: all 0.2s;
-webkit-transition: all 0.2s;/*safari 和 Chrome */
cursor: pointer;
}
.search-container-hot-list-item-content{
padding-left:10px;
font-size:14px;
margin-left:5px;
width: 94%;
}
.search-container-hot-list-item:hover{
cursor: pointer;
transform: scale(1.09);
}
.search-container-hot-list-item:hover .search-container-hot-list-item-num{
transform: scale(1);
}
.search-container-hot-list-item:hover .search-container-hot-list-item-content{
transform: scale(1);
}
.search-container-hot-list-item.red{
background-color:#fff5f2;
}
.search-container-hot-list-item-num{
margin-top:3px;
margin-left:10px;
text-align: center;
width: 16px;
height:16px;
border-radius: 2px;
background-color: #666;
color: #fff;
font-size:12px;
font-style:normal
}
.search-container-hot-list-item-num.red{
width: 16px;
height:16px;
border-radius: 2px;
background-color: #ff531d;
color:#fff
}
.search-container-hot-list-item-pagePrveBox{
display: flex;
justify-content: space-between;
height: 22px;
padding-top:10px;
padding-bottom:50px
}
.search-container-hot-list-item-pagePrve{
font-size:17px
}
.search-container-hot-list-item-pageNext{
color:#ccc;
font-size:14px
}
.pageBtn{
width: 22px;
height:22px;
line-height:22px;
border:1px solid #ccc;
text-align: center;
border-radius: 3px;
font-weight: bold;
color: #000;
cursor: pointer;
}
.pageBtn.gray{
color: #ccc;
}
.search-content{
width: 800px;
margin-top: 20px;
margin-left: 20px;
display: flex;
height:40px
}
.search-btn{
margin-left: 20px;
}
</style>
1963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
