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

问题描述

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

clipboard.png

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

我尝试使用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。。。对此不是很熟悉。查阅了一些资料后发现没有太多相关的内容,根据自己能查到的资料,又看的不是很懂。大概模仿了一下也没能完成。请各位大佬提供一下思路谢谢么么哒

回答:

<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>

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注