首页 > 其他分享 >elementUI-点击表格某一行携带参数跳转到另一个页面-路由携参

elementUI-点击表格某一行携带参数跳转到另一个页面-路由携参

时间:2022-09-07 09:56:19浏览次数:63  
标签:elementUI 携参 times 任务 params taskId 跳转 页面

1.应用场景示例
(1)在任务下发界面,点击查看巡检结果,携带tsakId,times跳转到任务结果界面,查询任务对应的任务结果
image
(2)任务结果页面
image
2.实现方法及步骤
(1)通过el-table,添加操作列

 <el-table-column align="center" fixed="right" label="操作" width="150">
        <template slot-scope="scope">
            <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看巡检结果</el-button>
        </template>
 </el-table-column>

(2)定义操作行方法handleClick(scope.row)
通过params把taskId、times传递到taskResult页面中(parmas传参不会显示在地址栏中)

    handleClick(row) {
      this.$router.push({
        name: "taskResult",
        params: {
          taskId: row.taskId,
          times: this.times,
        },
      });
    },

(3)在任务结果页面中接收taskId、times

  created() {
    this.taskId = this.$route.params.taskId;
    this.times = this.$route.params.times;
  },

(4)通过调用方法,查询当前taskId的任务结果

mounted(){
  this.taskJump(this.taskId);
}

标签:elementUI,携参,times,任务,params,taskId,跳转,页面
From: https://www.cnblogs.com/hutongtree/p/16664244.html

相关文章

  • netlify跳转
    <!DOCTYPEhtml><head><title>RedirectingtoNetlify</title><script>letgitUrl=window.top.location.hash.replace("#","")if(gitUrl.endsWith("/"))g......
  • elementUI-el-table表头固定不滑动
    1.表格总体需要实现滚动效果,但是表头不会随之滚动2.实现方式表格外层盒子高度100%;el-table的高度也为100%,el-table标签中添加height="100%"<divclass="tableD">......
  • vim 跳转到指定行三种方法
    vim中有3中方法可以跳转到指定行(首先按esc进入命令行模式):例如跳转到33行1、33gg/33G(跳转到文件第n行,无需回车)2、:33(跳转到文件第n行,需要回车)3、vim+33txt(在打开文......
  • jsp页面ie跳转谷歌
    <%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>首页</title></head><body><div><ahref="" onclick='test()......
  • 在uniapp中实现 单击按钮跳转至小程序内置空页面/外部链接
    记录一次业务需求,单击实现打开问卷给btn注册单击事件//鼠标单击事件 methods:{ companyBtnNavigation(){//第一次的尝试,报error:plusis......
  • 防止链接跳转
    常规方式方式1:<ahref="#"onclick="returnfalse"></a>方式2:<ahref="####"></a>javascript方式javascript是一个伪协议,后面的代码内容表示触发<a>标签后的默认......
  • uni-app页面跳转传递参数
    uni-app页面跳转传递参数<navigator>首先来看看官网给的介绍:navigator官网介绍页面跳转。该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中......
  • Vue的列表超链接(A标签)是什么?如何实现跳转呢?
    方法一:通过<router-link:to="">我要跳转,别拦我</router-link>首页列表:在这里我用a标签进行跳转,在vue里面使用<router-link></router-link>  //注意:这里的router-lin......
  • SpringMVC 05: SpringMVC中携带数据的页面跳转
    SpringMVC默认的参数对象SpringMVC默认的参数对象是指,不用再另行创建,相当于SpringMVC内置对象,可以直接声明并使用默认的参数对象有:HttpServletRequest,HttpServletRespon......
  • elementui对于vue表单自定义校验
    在<el-form-itemlabel="原因"prop="reson":rules="条件==值?[{required:true,message:'原因不能为空',trigger:'blur'}]:[{requ......