vue + element 实现不刷新页面的情况下点击表格哪一行改变哪一行的样式（字体 ，颜色）类似QQ邮箱已读未读样式

 

//1.再表格的标签中添加  
    a. :row-class-name  在表格喧嚷的时候就会执行相应的方法toggleRowClassName
    b. :@row-click  指定行的点击事件   

<el-table :data="tableData" border style="width: 100%; cursor: pointer" v-        loading="loading.table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" @sort-change="onSortChange" :row-class-name="toggleRowClassName" @row-click="doReaded">
</el-table>

//2.在这个方法中可以根据自己的业务逻辑返回自己定义的样式 'readed-by-admin' 这样就会在表格数据发                
    生变化的时候自动渲染

 toggleRowClassName({ row, rowIndex }) {
      if (row.readByAdmin === false) {
        return 'readed-by-admin';
      } else {
        return '';
      }
    }

//3.点击行进改变样式 执行@row-click 的diReaded方法  这里面就是调用接口进行修改状态之类的

doReaded: debounce(function(row, event, column) {
      if (row.readByAdmin === true) {
        return;
      }
      doReadByAdmin(row.msgId)
        .then(data => {

//4.这里很重要是我自己犯的错误：我修改了状态之后表格并没有重新渲染，因为修改的只是后台的数据前台 
    但是要实现不刷新页面，所以前台表格中的数据没有发生改变 row-class-name 就不会重新渲染，所以当 
    接口调用成功的情况后要手动修改表格数据才会让表格重新渲染
       
          row.readByAdmin = true;

        })
        .catch(error => {});
    }, 500),