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 相关文章推荐
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
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
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
Python中字符串的处理技巧分享
2016/09/17 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
Python里面如何实现tuple和list的转换
2012/06/13 面试题
儿子婚宴答谢词
2014/01/09 职场文书
满月酒主持词
2014/03/27 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
停车位租赁协议书
2014/09/24 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
windows系统安装配置nginx环境
2022/06/28 Servers