如何对el-table中某一行样式修改,解决修改样式无效的问题

开门见山:提醒样式无效可能是放在了scoped的style标签中

放在普通的style标签里面就可以了

博主使用el-table想要实现某一行更改样式的效果

如何对el-table中某一行样式修改,解决修改样式无效的问题_第1张图片

查阅饿了么文档后发现有一个控制此属性的一个回调

在这里插入图片描述

所以直接添加

 <el-table
          ref="multipleTable"
          :data="tableData"
          ****:row-class-name="tableRowClassName"****
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center', background: '#FAFAFA', color: '#000' }"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          ...

函数内容:

  // 动态更改一行table样式
    tableRowClassName({rowIndex}) {
      console.log(rowIndex === this.taskLocation);
      return rowIndex === this.taskLocation ? 'shinning' : '';
    },

样式代码:

.shinning {
  animation: shinningAnimation 1s linear;
  animation-iteration-count: 2;
  background-color: #e3b4b8;
}
@keyframes shinningAnimation {
  0% {
    opacity: 0;
    background-color: #f5f5f5;
  }
  100% {
    opacity: 1;
    background-color: #e3b4b8;
  }
}

重点 !!! 样式不能放在style scoped中, 要放在纯净的style的标签下面

你可能感兴趣的:(踩坑,Vue,css,html,vue.js)