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

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);
}
posted @   胡同树下  阅读(2385)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示