elementUI表格根据状态显示不同的字体颜色

elementUI表格根据状态显示不同的字体颜色，使用了两种方法分别观察了一下区别。

方法一

使用标签，但是表格中点击会悬浮显示文字，如图：

代码如下：

 <el-table-column
            align="center"
            label="匹配状态2"
            prop="status"
            show-overflow-tooltip
            width="80"
        >
            <template slot-scope="scope">
                <div
                    :style="{
                        color:
                            scope.row.status == '正常'
                                ? '#0CB618'
                                : '#EA1B29',
                    }"
                >
                    {{ scope.row.status }}
                </div>
            </template>
        </el-table-column>

还有可以使用span,重新再写一次数据，就不会悬浮了。

        <template slot-scope="scope">
            <span v-if="scope.row.status== '一般'">{{
                releaseConfirmStr(scope.row.status)
            }}</span>
            <span
                v-else-if="scope.row.status== '正常'"
                style="color: 0CB618"
                >{{ releaseConfirmStr(scope.row.status) }}</span
            >
            <span
                v-else-if="scope.row.releaseConfirm == '异常'"
                style="color: #EA1B29"
                >{{ releaseConfirmStr(scope.row.status) }}</span
            >
        </template>

方法二

el-table标签中增加一个方法回调，:cell-style=“cellStyle”。

代码：

    <el-table
        v-loading="loading"
        :data="list"
        :row-class-name="tableRowClassName"
        border
        :cell-style="cellStyle"
        style="width: 100%"
    >
        <el-table-column
            align="center"
            label="匹配状态1"
            prop="status"
            show-overflow-tooltip
            width="80"
        />
   </el-table>

对应的js:

// 表体字体颜色设置
/***
 * row为某一行的除操作外的全部数据
 * column为某一列的属性
 * rowIndex为某一行（从0开始数起）
 * columnIndex为某一列（从0开始数起）
 */
cellStyle({ row, column, rowIndex, columnIndex }) {
    // 状态列字体颜色
    if (row.status === "正常" && columnIndex === 0) {
        return "color: #0CB618";
    } else if (row.status === "异常" && columnIndex === 0) {
        return "color: #EA1B29";
    } else {
        return "";
    }
},

总结

推荐第二种方式字体不会悬浮，并且可以根据行或者列设置颜色。