前端基础学习

vue 两个模块传递参数

2021-04-28  本文已影响0人  LeslieFind

参考: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();
 },
上一篇 下一篇

猜你喜欢

热点阅读