element UI 表格样式动态设置以及排序响应

1.根据表格的属性设置对应的样式

 

我想要根据某一个属性设置对应的颜色样式，所以在elementUI给的“带状态表格”基础上改成如下的

//html部分：
<el-table-column prop="autoStatus" sortable @sortChange="tableRowClassName" label="Status">
          <template slot-scope="scope">
            <div>
              <div
                class="auto"
                style="height:18px;width:18px;border-radius:9px;float:left;margin-left:30px"
              ></div>
              {
  {scope.row.autoStatus}}
            </div>
          </template>
</el-table-column>


//js部分：
tableRowClassName({ row, rowIndex }) {
      //控制case状态对应的颜色
      if (this.dataList[rowIndex].autoStatus == 'Pass') {
        return 'success-row'
      } else if (this.dataList[rowIndex].autoStatus == 'NotRun') {