vue 表格内容跳转页面_vue项目中如何实现点击Dashboard跳转

vue项目中如何实现点击Dashboard跳转

发布时间：2020-11-16 14:55:37

来源：亿速云

阅读：83

作者：Leah

本篇文章给大家分享的是有关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跳转，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。