第一次做这个需求得时候很乱,总是在表格页和修改页徘徊,总觉得什么都会,但是就是做不出自己想要得效果

其实如果先把思路搞清楚,这个问题得知识点却是不多,以下是我对表格高亮显示得思路:

首先,我会从已知得表格table中得到我需要更改得行对象-  可以用row-click方法直接获取也可以用table得selec方法

然后通过路由传参,将table数组和获取得行对象传递给修改页面-因为在返回页面得时候定位当前行和页,因此这里也要将pagesize和currentPage进行传递

modifyDesc(row) {
let params = {
id: row.id,
codeId: row.codeId,
table: this.tableData,
totalPage: this.total,
pageSize: this.pageSize,
};
window.sessionStorage.setItem('editAlarmDesc', JSON.stringify(params));
this.$router.push({
name: 'modifyDesc',
query: {
table: JSON.stringify(this.tableData),
totalPage: this.total,
pageSize: this.pageSize,
currentPage: this.pageNum,
id: row.id,
codeId: row.codeId,
}
});
},

  

此处可以用query或者params传参,query会把传的参数拼接到url上,造成很乱得感觉,所以我选择params传递参数,为了防止刷新页面后数据不存在,在传参之前我会把table和行数据用session存储一下

下一步是对修改页面得操作--1、定义空对象将当前页面得值赋值,2、对比当前对象id和传入数组,去除相同得id对象,3、拿到当前对象得下标,4、返回表格页面,传递参数

modifyDescSave(){
this.updatedUser = this.ruleForm;
let tableIndex = 0;
let table = JSON.stringify(this.$route.query) !== '{}' ? JSON.parse(this.$route.query.table) : JSON.parse(sessionStorage.getItem('editAlarmDesc')).table;
table.forEach((item, index) => {
if(item.id === this.updatedUser.id){
table.splice(index, 1, this.updatedUser);
tableIndex = index;
}
});
this.$router.push({
name: 'alarmDesc',
params: {
newData: JSON.stringify(table),
totalPage: this.$route.params.totalPage || JSON.parse(sessionStorage.getItem('editAlarmDesc')).totalPage,
pageSize: this.$route.params.pageSize || JSON.parse(sessionStorage.getItem('editAlarmDesc')).pageSize,
currentPage: this.$route.params.currentPage || JSON.parse(sessionStorage.getItem('editAlarmDesc')).currentPage,
search: this.$route.params.search || JSON.parse(sessionStorage.getItem('editAlarmDesc')).search,
firstTop: true,
index: tableIndex
}
});
},

在跳转页面之前记得清除session哦

	beforeRouteLeave (to, from, next) {
// 判断数据是否修改,如果修改按这个执行,没修改,则直接执行离开此页面
if (this.updateCount > 0) {
// 登陆超时及注销时不显示此弹框
if(sessionStorage.getItem('isTimeOut') === 'false' && Auth.getJwtToken()) {
this.$my_confirm('确定后将不保存当前数据,直接关闭当前页面!确定要离开当前页面吗?', '提示').then(() => {
//点确定
next();
sessionStorage.removeItem('editAlarmDesc');
}).catch(() => {
//点取消
next(false);
sessionStorage.removeItem('editAlarmDesc');
});
} else {
next();
sessionStorage.removeItem('editAlarmDesc');
}
} else {
next();
}
},

  

最后是我们返回页面得要求:表格当前行高亮显示并定位到当前页面,此处我实在mounted进行接收,判断路由参数是否存在,如果不存在进行正常得请求操作,如果存在将传递得路由参数将表格以及页面相关值一一赋值

if (JSON.stringify(this.$route.params) !== '{}') {
this.tableData = JSON.parse(this.$route.params.newData);
this.pageSize = Number(this.$route.params.pageSize);
this.pageNum = Number(this.$route.params.currentPage);
this.firstTop = this.$route.params.firstTop;
this.countAlarmCodeByLevel();
this.totalNum = Number(this.$route.params.totalPage);
this.total = Number(this.$route.params.totalPage);
} else {
this.getTable().then(() => {
this.countAlarmCodeByLevel();
});
}

进行到当前得这一步我们得表格已实现定位操作,剩下得是表格当前行得渲染,我主要用了

row-class-name方法属性,通过改变行得class名来进行背景得高亮显示,具体方法如下
tableRowClassName({ row, rowIndex }) {
let bg = '';
this.multipleSelection.forEach(item => {
if (row.id === item.id) {
bg = 'ioms-table-check-class';
}
});
if (JSON.stringify(this.$route.params) !== '{}' && this.firstTop) {
let query = JSON.parse(this.$route.params.newData);
if(query && query.length > 0) {
if(this.$route.params.index) {
query[this.$route.params.index].id === row.id && (bg = 'ioms-table-new-class');
} else{
query[0].id === row.id && (bg = 'ioms-table-new-class');
}
}
}
return bg;
},

 其实仔细看来,在高亮显示的过程中对技术要求并不高,如果思路清晰,问题不大

小谢第36问:elemet - table表格修改后表格行高亮显示且定位到当前行当前页的更多相关文章

  1. 小谢第10问:前端JS下载文件、表格

    对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...

  2. 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题

    1.主要技术点:sessionStorage 会话存储进度 这里在使用之前,顺便说一下cookie.sessionStorage.localStorage 共同点:都是保存在浏览器端,且同源的. 区别 ...

  3. 小谢第8问:ui框架的css样式如何更改

    目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...

  4. 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?

    文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...

  5. 小谢第6问:js中,filter函数是怎么使用的

    数组的常用方法filter,今天在做数组筛选的时候用到需要将有重复的数组去除,因此用到这个函数,主要用到-- 选择需要的属性,最终留下想要的数组,如果刚开始的话可以看下下面代码 let nums = ...

  6. 小谢第2问:后端返回为数组list时候,怎么实现转为tree

    要求后端返回给我的list时候,在数组中定义有id , parentid, 可以用双重循环的方法,得到tree需要的数据结构,这样得到的数据就可以直接复制给树组件的data啦const oldData ...

  7. 小谢第1问:为什么要写blog

    一直犹豫了好久,终于在csdn上弄好了自己的博客账号,感谢平台,以后在工作的过程中,遇到不懂得问题,解决后,会在这里记录下自己所遇到的问题

  8. 小谢第23问: chorme的性能优化工具

    问题场景:在前端日趋工程化的今天,前端性能优化是一名合格的前端工程师必备的技能,那么,如何正确的使用性能分析工具呢? 解决方案: 性能分析的流程: 在开发中我一般使用公司开发的测试脚本-kbase-w ...

  9. 小谢第50问:vuex的五个属性-使用-介绍

    一.Vuex 是什么? 官网:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 关键词:状态 ...

随机推荐

  1. 关于Ubuntu系统忘记密码的解决方法合集

    昨天有台机器的Ubuntu系统密码出了问题,一直提示错误.由于里面的数据比较重要,不建议重装系统,所以百度了一会,最终解决了忘记密码问题.整理了一个大合集分享出来. 第一种:参考教程如下       ...

  2. mysql性能优化总结(MySql避免重复插入记录的几种方法)

    如果我们创建了(area, age,salary)的复合索引,那么其实相当于创建了:(area,age,salary),(area,age).(area)三个索引,这被称为最佳左前缀特性.因此我们在创 ...

  3. php - 如何解决CURL错误( 7 ): 无法连接到主机?

    php - 如何解决CURL错误( 7 ): 无法连接到主机? 1. 问题描述 调用第三方接口,本地调用一切ok,线上调用失败! 本地通过curLRequest()方法调用第三方接口时,curl_er ...

  4. 入门大数据---Elasticsearch是什么?

    Elasticsearch是谁不重要,重要的是咱们都知道百度,谷歌这样的搜索巨头吧.它们的核心技术都利用了Elasticsearch,所以我们有必要对Elasticsearch了解下! 1.Elast ...

  5. css的四种使用方式

    方式一:内联样式 内联样式,也叫行内样式,指的是直接在style属性中添加CSS 示例: <DIV style="display: none;background:red"& ...

  6. Python HTTP Server (Simples)

    Simple HTTP Server 适合临时开发调试web 使用, 直接当前项目下使用python命令快速起一个http server python2 python -m SimpleHTTPSer ...

  7. 从数据库中取时间值,遇到:java.sql.Timestamp cannot be cast to java.lang.Long

    将 java.sql.Timestamp 类型转换为 java.util.Date 类型.二者其实是父子关系,直接 Date d = (Date)时间戳 就可以了. Date d = (Date)时间 ...

  8. 断路器Hystrix(Ribbon)

    微服务架构中,根据业务划分成若干个服务,各单元应用间通过服务注册与订阅的方式互相依赖,依赖通过远程调用的方式执行,该方式难以避免因网络或自身原因而出现故障或者延迟,从而并不能保证服务的100%可用,此 ...

  9. String为什么要设置成Final类型

    ---今天面试碰到个这样的问题:String在设计的时候为什么要设计成final的  当时回答的是String功能已经很丰富了,不需要对其进行扩展,所有巴拉巴拉. 现在来正确看看为什么定义成final ...

  10. Red Hat Enterprise Linux 6上安装Oracle 11G(11.2.0.4.0)缺少pdksh包的问题

    RHEL 6上安装Oracle 11G警告缺少pdksh包 前言 相信很多刚刚接触学习Oracle的人,在RHEL6上安装11.2.0.3 or 11.2.0.4这两个版本的时候, 都遇到过先决条件检 ...