美文网首页前端基础学习
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://blog.csdn.net/crazywoniu/article/details/80942...

  • XCode环境变量和启动参数

    前言 XCode中Argument/Options模块,通过这两个模块,在启动APP的时候传递一些额外的参数进去,...

  • react--props

    props属性: props对于模块来说属性外来属性 传递参数: 模块中接受参数:this.props.username

  • React native数据通信

    导航器传递参数给路由往导航栏传递参数RN与原生模块通信 导航器传递参数给路由 示例:同导航器内的TestScree...

  • 在react中使用Link带参数的路由跳转

    1,引入Link模块 2,Link标签中带上要传递的参数 3,在跳转页面接收传递的参数

  • Vue--------vue-router

    app.vue router/index.js 参数传递 方法一(name传递参数) 在index.js里设置na...

  • requests模块传递参数

    字典传参 在百度上搜索简书,返回url为https://www.baidu.com/s?wd=简书 format格式化

  • 自定义指令

    directive 使用vue的全局方法directive实现自定义指令该方法传递两个参数,第一个参数为指令名,第...

  • vue 参数的使用

    记录vue参数的使用 使用js方法进行传递 使用vue的属性方式去进行传递 注:使用 :to 传值,需要在URL中...

  • vue路由参数传递

    1.配置路由 2.参数配置 params: { row: row } ||params: { row: row }...

网友评论

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

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