Vue 列表页table点击跳转详情页后返回列表页table变色

需求:列表跳详情后,返回列表页,所有点击过的列表项变色;

实现:一、将跳转的列表信息存储在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;
       }
      },

猜你喜欢

转载自blog.csdn.net/xuerwang/article/details/84873460