vue点击Dashboard不同内容跳转到同一表格的实例

2023-07-11 19:40:03 79

1.点击跳转写法

点击页面内容：优先级

优先级

点击页面内容：状态

状态

点击echarts柱状

this.chartEvent.on('click',function(param){
that.$router.push({
path:'/cases/case',
query:{createdTime:param.name,type:"createdTime"}
});
})

2.表格分页写法（不同跳转显示不同传参）

注：由于该页面下拉框也有相应的优先级筛选条件所有写了两层if判断了一下

getData:function(){
//获取CaseSearch里面的搜索内容
eventBus.$on('ticketEntityId',function(val){
tableCaseVue.ticketEntityId=val;
})
eventBus.$on('companyId',function(val){
tableCaseVue.companyId=val;
})
eventBus.$on('priorityId',function(val){
tableCaseVue.priorityId=val;
})
eventBus.$on('status',function(val){
tableCaseVue.status=val;
})
eventBus.$on('ticketCategory',function(val){
tableCaseVue.ticketCategory=val;
})

varpageTicketDate={
"pageNum":this.current,
"pageSize":this.pageSize,
"priorityId":tableCaseVue.priorityId,
"status":tableCaseVue.status,
"ticketEntityId":tableCaseVue.ticketEntityId,
"companyId":tableCaseVue.companyId,
"ticketCategory":tableCaseVue.ticketCategory
};
//优先级
if((this.$route.query.type=='priorityId')&&(pageTicketDate.priorityId=='')){
pageTicketDate.priorityId=this.$route.query.priorityId;
}

//状态
if((this.$route.query.type=='status')&&(pageTicketDate.status=='')){
pageTicketDate.status=this.$route.query.status;
}

//创建时间
if(this.$route.query.type=='createdTime'){
pageTicketDate.createdTime=this.$route.query.createdTime;
}

//当前月
if(this.$route.query.type=='currentMonth'){
pageTicketDate.currentMonth=this.$route.query.currentMonth;
}

if(pageTicketDate.ticketEntityId||pageTicketDate.companyId||pageTicketDate.priorityId||pageTicketDate.status||pageTicketDate.ticketCategory){
pageTicketDate.ticketEntityId=tableCaseVue.ticketEntityId;
pageTicketDate.companyId=tableCaseVue.companyId;
pageTicketDate.priorityId=tableCaseVue.priorityId;
pageTicketDate.status=tableCaseVue.status;
pageTicketDate.ticketCategory=tableCaseVue.ticketCategory;
pageTicketDate.createdTime='';
pageTicketDate.currentMonth='';
}

this.$api.ticket.pageTicket(pageTicketDate)
.then(res=>{
this.tableCaseDate=res.data.records;
for(vari=0;i
补充知识：vue点击跳转到详情页
1商品组件页面GoodsInfo.vue(点击该组件跳转到详情页)




.goods-info{
padding-bottom:0.2rem;
.goods-image{
text-align:center;
img{
width:95%;vertical-align:middle;
}
}
.goods-name{
padding:08px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.goods-price{
text-align:center;
color:#e5017d;
}
}

2商品详情页面Goods.vue(接收商品组件页面GoodsInfo.vue传过来的goodsId)






以上这篇vue点击Dashboard不同内容跳转到同一表格的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

vue点击Dashboard不同内容 跳转到同一表格的实例

热门推荐

随机推荐

vue点击Dashboard不同内容跳转到同一表格的实例