vue 两个模块传递参数

参考:https://blog.csdn.net/crazywoniu/article/details/80942642
背景:在列表页选择几行数据,点击后展示折线图,所以需要传递选择的这几行的id,到折线图的页面是发起请求,获取值之后展示折线图
一、封装的api中:

# 根据id去请求数据的接口,在折线图的页面需要请求该接口
export const getRecordByids = params => { return axios.get(`${record_base}/api/getRecords`, { params: params }); };

二、列表页定义方法,该方法是点击按钮后,传递id并跳转到折线图页面,以下为列表模块的关键代码

#<template>中
#表格标签中设置所选行
<el-table :data="records" highlight-current-row v-loading="listLoading" @selection-change="selsChange" :height="tableHeight" style="width: 100%;margin-top:20px;">
<el-button type="primary" @click="testNewPage" :disabled="this.sels.length===0">查看所选趋势图</el-button>

#data中:
sels: []  //列表选中行

#method中定义:
#该方法是把选中行取出,放在sels中
selsChange: function (sels) {
    this.sels = sels;
},

# 该方法是跳转新页面并传递参数
testNewPage(sels){
    var ids = this.sels.map(item => item.id).toString();
    this.$router.push({name:'趋势图',params: { ids: ids }})
},

三、折线图模块中

#data中:
data(){
        return {
            chartLine: null,
            ids:"",
            records:[],
            xAxis:[],
            tps:[],
            rt:[]
        }
    },

# method中发送请求和绘图
getRecords() {
            let para = {
                ids: this.$route.params.ids
            };
            //NProgress.start();
            getRecordByids(para).then((res) => {
                this.records = res.data.data;
                var xAxis = new Array();
                
                this.xAxis = xAxis;
                var tps = new Array();
                var rt = new Array();
                for (var i = 0;i<this.records.length;i++) { 
                    xAxis.push(this.records[i].id);
                    tps.push(this.records[i].tps);
                    rt.push(this.records[i].avgRt);
                }
                console.log(xAxis)
                this.xAxis = xAxis;
                this.tps = tps;
                this.rt = rt;
            });             
},
drawLineChart()//略
drawCharts() {            
            this.drawLineChart();            
 },

# mounted
mounted:function(){        
        this.getRecords();
        this.drawCharts();
 },
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,981评论 1 180
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,771评论 28 54
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 6,310评论 4 8
  • 怎么对待生活,它也会怎么对你 人都是哭着来到这个美丽的人间。每个人从来到尘寰到升入天堂,整个生命的历程都是一本书,...
    静静在等你阅读 5,152评论 1 6

友情链接更多精彩内容