前端通过勾选某/多行后点击按钮跳转到另一页面并能查询到当前所勾选的行的数据(非详情页面)

前端通过勾选某/多行后点击按钮跳转到另一页面并能查询到当前所勾选的行的数据(非详情页面)

一、场景需求

  • 场景需求:选中行后点击修改信息跳转到另一主页面,在另一主页面中查出前一个页面所勾选行的数据
    在这里插入图片描述
    在这里插入图片描述

二、前端实现

需求分析:
1.首先需要知道这是从一个主页面跳转到另一个主页面,所以需要使用到router.push进行页面路径跳转
2.路径跳转时需要传递所勾选行的唯一参数(例如id)
3.需要查询出所勾选行的页面需要监测到是从router.push该页面跳转过来的
4.在跳转后的页面中监测到是从该页面过来的则需再次请求页面的查询参数接口(前提:后端给的接口必须是能查出来你在路径中所携带的参数,例如id)

  • 代码实现:
// 选中行的页面(即跳转前页面)
<template>
  <table ref="tableRef" >
    <template #action>
      <el-button
        type="primary"
        :disabled="selection.length === 0"
        @click="toList"
        >修改信息</el-button
      >
    </template>
  </table>
</template>

<script lang="ts">
import {
    defineComponent, reactive, ref, toRefs } from 'vue';
import {
    useI18n } from 'vue-i18n';
import useState from '@/hooks/useState';
import useViewVersion from '@/hooks/useViewVersion';
import {
    useRouter } from 'vue-router';
import {
    cusTem } from '@/services/tem';

interface ViewState {
   }

export default defineComponent(
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值