element+Vue2,在一个页面跳转到另一个页面,并自动选中table的某一行

  • 需求:点击A页面的某处,跳转到B页面并选中B页面表格的某一行(点击B页面的搜索后需要清空默认选择的状态)
  • 环境:vue2、element的table,table允许多选
  • 知识点:主要使用到table的这两属性::row-key="":reserve-selection="true和表格的toggleRowSelection方法,还有getList()的回调函数的使用就是getlList要有返回值,通知create里在getlis调取成功t后再做什么,不然渲染报错
    在这里插入图片描述
    在这里插入图片描述
  • 代码
// html
<el-table 
            :header-cell-style="{background:'#d0d0d0',color:'#000'}" 
            ref="reportmul"
            :data="tableData"
            style="width: 100%"
            height="700"
            @selection-change="handleSelectionChange"
            @row-click="rowClick"  
            :row-style="rowStyle" 
            :row-class-name="rowClassName"
            
            :row-key="getRowKeys"
           
          >
          <el-table-column type="selection"  align="center" :reserve-selection="true"></el-table-column>
		// .......
</el-table>

// B页面js
	// 其他页面跳转到B页面时需要再created里判断是不是跳转而来,通常是判断路由有没有带参数,然后执行getList获取页面数据,有数据后才能设置默认选中操作!
data() {
      return{
          searchVal:'',// 搜索
          multipleSelection:[],// 当前选择的行
          tableData:[],// table数据
          }
         },
created(){
    // 初始化
    if(this.$route.params.input){
      this.searchVal = this.$route.params.input
      await this.getList().then(res=>{
       
         /**
         * 如果跳转过来,就给multipleSelection 赋值初始值
         */
        this.multipleSelection[0] = this.tableData[0]
        this.$refs.reportmul.toggleRowSelection(this.tableData[0],true)//这句重点
      })
    }
   this.getList()
  },
 methods: {
	getList(obj={}){
     return listgetpage(xxx).then(res=>{
              this.tableData  = res.data.result
             
      })
     },

	/** 搜索 */
    onSearch(){
      this.getList({input:this.searchVal}).then(()=>{
      // 搜索后清空默认选择
        // this.multipleSelection =[]
        this.$refs.reportmul.clearSelection()
      }
     )
      

    },

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/507189.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 全景图

前言 MySQL是啥&#xff1f;我一直以为MySQL是数据库&#xff0c;直到我最近看了很多关于MySQL的文章、专栏以及书籍后&#xff0c;我对MySQL的才有了更加深刻的体会。 原来MySQL并不是数据库&#xff0c;又或者说&#xff0c;我认为“MySQL是数据库这种想法”是片面的。其实…

SpringBoot 集成分布式任务调度 XXL-JOB【保姆级上手】

文章目录 XXL-JOB 介绍分布式任务调度XXL-JOB 概述 快速入门下载源码初始化调度数据库编译源码调度中心调度中心介绍配置调度中心部署调度中心集群部署调度中心&#xff08;可选&#xff09;Docker 镜像方式搭建调度中心&#xff08;可选&#xff09; 执行器执行器介绍添加依赖…

Talend API Tester-api接口测试插件

这是Google的一个扩展&#xff0c;直接在右上角&#xff0c;扩展程序——管理扩展程序直接下载安装就可以了 web接口测试是非常方便的

若依框架学习使用

若依官网项目拉取下来介绍 | RuoYi 项目运行&#xff1a; 1.idea安装&#xff0c;可以运行前后端 编辑器idea、jdk环境安装、数据库mysql、navicat工具、redis(redis-server启动)安装 2.navicat数据库连接, 创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql&#xff0c;qua…

国内ip怎么来回切换:操作指南与注意事项

在数字化时代&#xff0c;互联网已经成为我们日常生活、学习和工作中不可或缺的一部分。然而&#xff0c;随着网络应用的不断深化&#xff0c;用户对于网络环境的稳定性和安全性要求也越来越高。其中&#xff0c;IP地址作为网络中的关键标识&#xff0c;其切换与管理显得尤为重…

基于jsp+Spring boot+mybatis的图书管理系统设计和实现

基于jspSpring bootmybatis的图书管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获…

基于 google 的 libphonenumber 将手机号转成地区及供应商信息

依赖&#xff1a; <dependency><groupId>com.googlecode.libphonenumber</groupId><artifactId>libphonenumber</artifactId><version>8.13.26</version> </dependency> <dependency><groupId>com.googlecode.lib…

CVE-2022-29405 Apache Archiva任意用户密码重置漏洞分析

Apache Archiva是一套可扩展的Artifact Repository管理系统。它能够与Maven&#xff0c;Continuum和ANT等构建工具完美结合。Archiva提供的功能包括&#xff1a;远程Repository代理&#xff0c;基于角色的安全访问管理&#xff0c;Artifact分发、维护、查询&#xff0c;生成使用…

强烈推荐:2024 年12款 Visual Studio 亲测、好用、优秀的工具,AI插件等

工具类扩展 1. ILSpy 2022 &#xff08;免费&#xff09; ILSpy 是 ILSpy 开源反编译器的 Visual Studio 扩展。 是一款开源、免费的、且适用于.NET平台反编译【C#语言编写的程序和库(.dll)内容】工具&#xff1b;可以集成在Visual Studio 开发工具中&#xff0c;能够十分快捷…

探索父进程和子进程

文章目录 通过系统调用查看进程PID父进程、子进程 通过系统调用创建进程-fork初识为什么fork给父进程返回子进程的PID&#xff0c;给子进程返回0fork函数如何做到返回两个值一个变量为什么同时会有两个返回值&#xff1f;bash总结 通过系统调用查看进程PID getpid()函数可以获…

【面试题】RocketMQ如何处理消息重复的问题呢?

对分布式消息队列来说&#xff0c;同时做到确保一定投递和不重复投递是很难的&#xff0c;就是所谓的“有且仅有一次” 。RocketMQ择了确保一定投递&#xff0c;保证消息不丢失&#xff0c;但有可能造成消息重复。 处理消息重复问题&#xff0c;主要有业务端自己保证&#xff…

【Docker】搭建强大易用的个人博客 - Halo

【Docker】搭建强大易用的个人博客 - Halo 前言 本教程基于绿联的NAS设备DX4600 Pro的docker功能进行搭建&#xff0c;采用Halo MySQL实例作为演示。 简介 Halo [ˈheɪloʊ] 是一个简洁&#xff0c;现代&#xff0c;快速且非常灵活的建站工具&#xff0c;它是由一位中国开…

Web漏洞-深入WAF注入绕过

目录 简要其他测试绕过 方式一:白名单&#xff08;实战中意义不大&#xff09; 方式二:静态资源 方式三: url白名单 方式四:爬虫白名单 #阿里云盾防SQL注入简要分析 #安全狗云盾SQL注入插件脚本编写 在攻防实战中&#xff0c;往往需要掌握一些特性&#xff0c;比如服务…

AI人像超分解决方案解析

在数字化高速发展的今天&#xff0c;企业对于视觉内容的需求日益增长&#xff0c;特别是在人像处理方面&#xff0c;高清、细腻的画面质量已成为行业标配。美摄科技&#xff0c;作为业界领先的AI视觉技术提供商&#xff0c;凭借其强大的研发实力和深厚的行业经验&#xff0c;推…

九州金榜|孩子沉迷手机网络是什么原因?应该怎么办?

随着现在社会的发展进步&#xff0c;手机已经是每个家庭必不可少的物品&#xff0c;现在基本每个人都是人手一部手机&#xff0c;有些人会配置多部手机&#xff0c;很多家长在忙碌一天后&#xff0c;回到家中也是手机不离手&#xff0c;经常坐下就开始玩手机&#xff0c;这种行…

JAVA学习笔记21(访问修饰符)

1.访问修饰符 ​ *基本介绍 ​ java提供四种访问控制修饰符号&#xff0c;用于控制方法和属性(成员变量)的访问权限(范围) 1.公开级别&#xff1a;用public修饰&#xff0c;对外公开 2.受保护级别&#xff1a;用protected修饰&#xff0c;对子类和同一个包中的类公开 3.默…

2024.4.1每日一题

LeetCode 故障键盘 题目链接&#xff1a;2810. 故障键盘 - 力扣&#xff08;LeetCode&#xff09; 题目描述 你的笔记本键盘存在故障&#xff0c;每当你在上面输入字符 i 时&#xff0c;它会反转你所写的字符串。而输入其他字符则可以正常工作。 给你一个下标从 0 开始的字…

4个文案写作神器,高效一键生成原创文案!

4个文案写作神器&#xff0c;高效一键生成原创文案&#xff01;在当今数字化时代&#xff0c;内容创作已成为企业营销的关键环节之一。然而&#xff0c;许多营销人员面临着文案创作的挑战&#xff0c;他们需要快速、高效地生成原创文案来吸引受众。幸运的是&#xff0c;现在有四…

刷题之动态规划-路径问题

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;开始刷动态规划的题目了&#xff0c;要特别注意初始化的时候给什么值。 动态规划5个步骤 状态表示 &#xff1a;dp数组中每一个下标对应值的含义是什么->dp[i]表示什么状态转移方程&#xff1a; dp[i] 等于什么1 和 2 是…

鹰眼降尘系统的维护成本高吗(已解答)

一、鹰眼降尘系统的维护成本高吗? 鹰眼降尘系统的维护成本会受到多种因素的影响&#xff0c;包括系统的规模、使用频率、设备质量、维护计划等。一般来说&#xff0c;合理的维护可以降低成本并延长系统的使用寿命。 以下是一些影响鹰眼降尘系统维护成本的因素&#xff1a; 设…