table组件高亮指定行

起因

在某项目中需要记住页面当前选中表格的行，以便从其他页面返回后能看到之前的记录，其中elementUI提供了table组件对应的方法，这里我们需要使用setCurrentRow方法高亮指定行，不过这里有个问题，看网上一般的用法如下

this.$refs.questionTable.setCurrentRow(this.$refs.questionTable.data[2])

或者

this.$refs.questionTable.setCurrentRow(this.tableData[2])

上述两种方法都是可以生效的，这里我猜测该组件是通过比较给定的row是否与组件的某一行数据相等，由于这里使用的是对象类型的参数，故猜测他们的比较方式比较奇葩，可能要求是==同一对象==？

因此之前的方案是，将这个变量row保存下来，然后存到sessionStorage中，后面发现通过此种方法保存的对象，由于经过JSON的转换之后，已经和原来不是一个对象了^[相当于是深拷贝],故这个setCurrentRow方法没法生效

解决方案

就是只保存对应行的索引值，那么问题就转变为如何求行的索引值，组件并没有提供对应的方法，故只能曲线救国，这里elementUI 获取table行的索引号的解决方案很好，在此记录一下

 <el-table
          ref="multipleTable"
          :data="tableData"
          :row-class-name="rowClassName"
          @row-click='handleRowClickRole'
          tooltip-effect="dark"
          fit
          size="medium"
          style="width: 100%"
          :header-cell-style="{background:'#fafafa'}" >
 
          <el-table-column
            prop="bigId"
            label="序号"
            width="150">
 
          </el-table-column>
</el-table>
 
<script>
export default {
      data() {
        return {
          tableData: [],
        }
      },
      methods: {
    
        //获取当前的行数
        rowClassName({row, rowIndex}) {
          //把每一行的索引放进row
          row.index = rowIndex;
          // console.log(row)
        },
        handleRowClickRole(row){
            this.rowIndex = row.index
            console.log(this.rowIndex)
        }
      }
}
</script>

或者利用slot-scope中的scope也能获取到当前行的索引值

<el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="toView(scope)" type="text" size="small">查看</el-button>
          <el-button @click="toPractice(scope.row)" type="text" size="small">做题</el-button>
        </template>
      </el-table-column>

table组件高亮指定行

起因

解决方案

相关链接