element-ui 自定义单元格字体颜色样式

最新推荐文章于 2024-11-25 14:12:45 发布

转载最新推荐文章于 2024-11-25 14:12:45 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Alex-ZJ/p/10156810.html

文章标签：

#ui #javascript #ViewUI

本文介绍了一种使用Element UI表格组件中状态显示的优化方法，通过条件判断改变字体颜色，实现在线、离线和未知状态的直观展示。

<el-table-column label="状态" prop="State">
    <template slot-scope="scope">
        <font v-if="scope.row.State === 'online'">在线</font>
        <font v-else-if="scope.row.State === 'offline'" color="red">离线</font>
        <font v-else color="blue">未知</font>
    </template>
</el-table-column>