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 @ 2022-09-07 09:48  胡同树下  阅读(2735)  评论(0)    收藏  举报