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


Posted in Javascript onNovember 13, 2020

1.点击跳转写法

点击页面内容:优先级

<router-link :to='{ path: "/cases/case",query: { priorityId: 0 ,type:"priorityId"}}' style="color: #515a6e;">优先级</router-link>

点击页面内容:状态

<router-link :to='{ path: "/cases/case",query: { status: 0 ,type:"status"}}' style="color: #515a6e;">状态</router-link>

点击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<this.tableCaseDate.length;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(点击该组件跳转到详情页)

<template>
<div class="goods-info" @click="goGoodsPage()">
<div class="goods-image">
<img v-lazy="goodsImage">
</div>
<div class="goods-name">{{goodsName}}</div>
<div class="goods-price">¥{{ goodsPrice.toFixed(2) }}</div>
</div>
</template>
<script>
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}})
}
}
};
</script>
<style lang="scss" scoped>
.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;
}
}
</style>

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

<template>
 <div>商品详情页</div>
</template>

<script>
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 => {

    });
  }
 }
};
</script>

<style lang="scss" scoped>
</style

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

Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
JS实现瀑布流效果
Mar 07 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 #Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 #Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 #Javascript
在vue中嵌入外部网站的实现
Nov 13 #Javascript
如何基于viewport vm适配移动端页面
Nov 13 #Javascript
You might like
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
js控制frameSet示例
2013/09/10 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
详解Node 定时器
2018/02/26 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
下载给定网页上图片的方法
2014/02/18 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python实现交并比IOU教程
2020/04/16 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
浙江文明网签名寄语
2014/01/18 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2016中考冲刺决心书
2015/09/22 职场文书