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

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;

})

var pageTicketDate = {

"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(var i=0;i

// 响应时间

if(this.tableCaseDate[i].waitTime!=undefined){

this.tableCaseDate[i].waitTime=this.tableCaseDate[i].waitTime+'分钟';

}

// 处理时间

if(this.tableCaseDate[i].handleTime!=undefined){

this.tableCaseDate[i].handleTime=this.tableCaseDate[i].handleTime+'分钟';

}

// 完成时间

if(this.tableCaseDate[i].finishTime!=undefined){

this.tableCaseDate[i].finishTime=this.tableCaseDate[i].finishTime;

}else{

this.tableCaseDate[i].finishTime='N/A';

}

}

// 当前页

this.current = res.data.current;

// 总条数

this.dataTotal = res.data.total;

});

}

补充知识：vue点击跳转到详情页

1商品组件页面GoodsInfo.vue(点击该组件跳转到详情页)

{{goodsName}}

￥{{ goodsPrice.toFixed(2) }}

export default {

name: "goodsInfo",

// 首页传过来的

props: ["goodsImage", "goodsName", "goodsPrice", "goodsId"],

data() {

return {};

},

methods: {

goGoodsPage() {

// 跳转到Goods.vue商品详情页面,name为Goods.vue页面路由配置里的的name属性

this.$router.push({name:"goods",query:{goodsId:this.goodsId}})

}

}

};

.goods-info {

padding-bottom: 0.2rem;

.goods-image {

text-align: center;

img{

width: 95%;vertical-align: middle;

}

}

.goods-name {

padding: 0 8px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.goods-price {

text-align: center;

color: #e5017d;

}

}

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

商品详情页

import url from "@/urlApi.js";

export default {

name: "goods",

data() {

return {

goodsId: ""

};

},

created () {

// 接收GoodsInfo.vue传过来的goodsId

this.goodsId = this.$route.query.goodsId

console.log(this.goodsId)

this.getGoodsInfo();

},

methods: {

getGoodsInfo() {

let that = this;

this.$http

.post(url.getDetailGoodsInfo,{goodsId: that.goodsId})

.then(response => {

//根据goodsId获取对应的商品详情信息

console.log(response)

})

.catch(error => {

});

}

}

};

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