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 自动完成脚本整理(33个)
Oct 20 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
js只执行1次的函数示例
Jul 20 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue 中几种传值方法(3种)
Nov 12 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP 验证码的实现代码
2011/07/17 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
django认证系统 Authentication使用详解
2019/07/22 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
八项规定对照检查材料
2014/08/31 职场文书
结婚幸福感言
2015/08/01 职场文书
导游词之昭君岛
2020/01/17 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Pandas数据结构之Series的使用
2022/03/31 Python
idea下配置tomcat避坑详解
2022/04/12 Servers