需求:列表跳详情后,返回列表页,所有点击过的列表项变色;
实现:一、将跳转的列表信息存储在sessionStorage里
二、返回列表的时候,取出sessionStorage信息,给table附样式
代码:
在详情页获取传递过来的行id,并存储在sessionStorage里,写在vue 的mounted里,注释已经很全了
mounted(){
var idArray=[];
var id = this.$route.query.id;
var arr={id:id};
//已经访问过的id不再存储
if(sessionStorage.getItem('arr')){ //判断从sessionStorage获得的arr是否为空
var arrget = sessionStorage.getItem('arr'); //获得已经存储的数据
var arrayget = JSON.parse(arrget); //转成JSON对象
for(var i=0;i<arrayget.length;i++){
if(arr.id ==arrayget[i].id){ //判断新传来的id是否已在session内存储
arrayget.splice(i,1); //删除下标为i的重复元素
}
}
arrayget.push(arr); //继续赋值
idArray = arrayget;
}else{
idArray.push(arr);
}
var str = JSON.stringify(idArray); //sesson只存储json字符串,转成字符串
sessionStorage.setItem('arr',str); //存储
},
在列表页里的element table标签上写 :cell-style="rowStyle",:cell-style为每个单元格附样式,rowStyle为样式函数名称,具体查看elememnt官方文档,或者查看以前文章https://blog.csdn.net/xuerwang/article/details/84305983
<el-table :data="tableDataList" border stripe style="width: 100%"
:cell-style="rowStyle">
<el-table-column prop="name" align="center" label="名称"></el-table-column>
<el-table-column fixed="right" align="center" width="200" label="操作">
<template slot-scope="scope">
<el-button
@click="detail(scope.row)"
type="text"
size="small"
v-show="scope.row.status!=1 && scope.row.status!=2"
>详情
</template>
</el-table-column>
</el-table>
在列表页的mounted里写上
var arrget = sessionStorage.getItem('arr'); //获得session里的arr列表
var arrayget = JSON.parse(arrget); //转成JSON对象
this.heighLightArray = arrayget; //把列表赋给本地变量,别忘了在data里定义该变量
在列表页的methods里写上
//高亮
rowStyle({row, column, rowIndex, columnIndex}) {
var str=""
if(this.heighLightArray){
for (var i = 0; i < this.heighLightArray.length; i++) {
if (row.id == this.heighLightArray[i].id&&column.label=="操作") { //,这里我只给最后一列加样式了
str="background:rgb(251, 245, 245)"
break;
}else{
str= ""
}
}
return str;
}
},