前端、Vue、element组件el-table中，根据内容改变字体颜色

问题：

如图，状态正常时显示蓝色，状态冻结时显示红色，即字体颜色随内容改变。

方法：

<template>
<div>
    <el-table-column label="状态" width="200"
        ><template slot-scope="scope">
          <el-button
            type="text"
            :class="scope.row.usersStatus === '正常' ? 'green' : 'red'"
            >{{ scope.row.usersStatus }}</el-button
          >
        </template></el-table-column
      >
</div>
</template>

<style scoped>
/* @import url(); 引入css类 */
.red {
  color: red !important;
}
.green {
  color: #409eff !important;
}
</style>