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.inputawait 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()})},}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【每日跟读】常用英语500句(100~200)

【每日跟读】常用英语500句 My apologies. 我向你道歉 Mayday. 求救 I’m begging you. 我求你了 Allow me. 让我来 That’s for sure. 那是肯定的 I wish I could. 我希望我能 Don’t leave me. 别离开我 You suck. 你太烂了 In that case. 这样的话 From now on. 从…

【工具-MobaXterm】

MobaXterm ■ MobaXterm-简介■ MobaXterm-下载安装■ MobaXterm-(Session Settings)■ SSH■ Telnet■ Rsh (remote shell)■ Xdmcp■ RDP■ VNC (Virtual Network Console)■ FTP (文件传输)■ SFTP■ Serial■ File■ Shell■ Browser■ Mosh&#xff08;Mobile Shell)■ Aw…

前端web移动端学习day04

移动 Web 第四天 01-vw适配方案 vw和vh基本使用 vw和vh是相对单位&#xff0c;相对视口尺寸计算结果&#xff0c;相对于屏幕的逻辑参数 vw&#xff1a;viewport width&#xff08;1vw 1/100视口宽度 &#xff09;vh&#xff1a;lviewport height ( 1vh 1/100视口高度 ) …

Linux如何将桌面版转为mini版-解决中文字体变为英文字体

中文字体转为英文字体 我们进入Rocky-Linux后&#xff0c;ls或者打开文件夹发现有中文 我们执行命令 sudo localedef -i en_US -f UTF-8 en_US.UTF-8将其转为英文&#xff0c;并且重启机器 此时中文转化为英文 桌面版linux转为MINN版 1. 我们可以卸载桌面版 sudo dnf gr…

前端发版上线出现白屏问题

目录 路由配置问题资源缓存问题首屏加载过慢 &#xff1a;喂&#xff0c;你的页面白啦&#xff01; 出现上线白屏的问题有很多&#xff0c;如&#xff1a;配置错误、缓存问题、浏览器兼容问题&#xff0c;根据不同情况去解决。 路由配置问题 问题描述&#xff1a; 在vue开发…

【CSDN活动】程序员职业生涯的分水岭:年龄还是经验?

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 程序员职业生涯的分水岭&#xff1a;年龄还是经验&#xff1f;引言技术更新换代…

【Java程序设计】【C00377】基于(JavaWeb)Springboot的社区医疗服务系统(有论文)

【C00377】基于&#xff08;JavaWeb&#xff09;Springboot的社区医疗服务系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#x…

百人一岗,Android开发者的困境。。。。。

前言 在当前的Android开发领域&#xff0c;竞争的激烈程度已经达到了前所未有的水平&#xff0c;几乎到了100个开发者竞争1个岗位的地步。 这种“内卷”现象的背后&#xff0c;是技术的快速发展和市场对Android开发者技能要求的不断提升。随着移动应用的普及和多样化&#xf…

【c++】类和对象(四)深入了解拷贝构造函数

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好啊&#xff0c;本篇内容带大家深入了解拷贝构造函数 目录 1.拷贝构造函数1.1传值调用的无限调用1.2浅拷贝1.3深拷贝1.4深拷贝的实现 1.拷贝构造函数 拷贝构造函数是一种特殊的…

一款超酷、功能强大的一体化网站测试工具:Web-Check

今天给大家一款网站一体化测试工具&#xff1a;Web-Check&#xff01; Web-Check 是一款功能强大的一体化工具&#xff0c;用于发现网站/主机的相关信息。用于检查网页的工具&#xff0c;用于确保网页的正确性和可访问性。它可以帮助开发人员和网站管理员检测网页中的错误和问…

多层陶瓷电容器(MLCC)的基本结构与特点

多层陶瓷电容器&#xff08;MLCC&#xff09;是一种电子元件&#xff0c;用于存储电荷和调节电路中的电容值。它们由多个陶瓷层组成&#xff0c;每个层之间夹有金属电极&#xff0c;然后堆叠在一起&#xff0c;并在两端连接上导体引线&#xff0c;形成一个整体结构。在外部通常…

爬虫基础训练题

1.抓取imooc网站实战课程部分的课程名称&#xff08;所有课程大概7页&#xff0c;抓取1到5页&#xff09;&#xff0c;并把所有课程名称存储为txt文件第一页地址 2.设置一个请求头&#xff08;headers&#xff09;&#xff0c;这是一个字典&#xff0c;用于在HTTP请求中设置请…