美文网首页前端基础学习
vue 两个模块传递参数

vue 两个模块传递参数

作者: LeslieFind | 来源:发表于2021-04-28 14:31 被阅读0次

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

    相关文章

      网友评论

        本文标题:vue 两个模块传递参数

        本文链接:https://www.haomeiwen.com/subject/ayevrltx.html