element的table中某一单元格如何根据一个属性的值来更改其样式？

Question

问题描述

需求是这样的。后台返回过来的数据是status=0/1(0异常，1正常)。需要的效果如下图。

问题出现的环境背景及自己尝试过哪些方法

我尝试使用cell-style属性绑定方法，但是控制台却报错称该方法undefin

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<el-table-column label="状态"
   prop="status"
   :formatter="formate"
   :cell-style="statusStyle">

statusStyle({ row, column, rowIndex, columnIndex }) {
      if (this.data[rowIndex].status === 0) {
        return 'color:#ED3F14'
      }
    }

你期待的结果是什么？实际看到的错误信息又是什么？

控制台却报错：

Property or method "statusStyle" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

该如何实现这个需求？我是刚开始用VUE.JS+ELEMENT-UI。。。对此不是很熟悉。查阅了一些资料后发现没有太多相关的内容，根据自己能查到的资料，又看的不是很懂。大概模仿了一下也没能完成。请各位大佬提供一下思路谢谢么么哒

Answer 1

<el-table-column label="状态"
   prop="status"
   :formatter="formate">
    <template slot-scope="scope">
        <span :style="{ color: scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status === 1 ? '正常' : '异常' }}</span>
    </template>
</el-table-column>

Answer 2

不需要用cell-style，直接table-item的slot插进一个span，class根据字段值选择