[JavaScript知识库]element+vue的table中某一行标红

一、首先在要显示的<el-table></el-table>加上?:row-class-name="tableRowClassName"

<el-table :row-class-name="tableRowClassName">

        <!--  要显示的数据  -->    

</el-table>

二、然后再methods:{}中写入??tableRowClassName(){}方法

  //标红table指定行
      tableRowClassName({row, rowIndex}) {

     //判断条件（quantityStock ，warningLimit ，quantityStock 列表字段信息）
        if (row.quantityStock <= row.warningLimit || row.quantityStock <= 0) {
          // 后面的css样式
          return 'warning-row';

        } else if (row.quantityStock > row.warningLimit) {
           // 后面的css样式
          return 'success-row';

        }

        // 默认标红第一行
        // if (rowIndex === 0) {
        //   return 'warning-row';
        // }

        return '';
      },

三、最后在加上<style scoped>样式(颜色可以自己调)

<style scoped>

  /deep/ .el-table .success-row {
    color: rgb(27, 33, 27) !important;
  }

  /deep/ .el-table .warning-row {
    color: #f51f1f !important;
  }

</style>