H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【element-ui】element UI 表格问题:如何能让某个表格字体颜色变为指定色?

如图,需要将升级失败的字体颜色变为红色,我不知道要在哪里进行修改,文档中没看到类似样式。

图片描述

图片描述

不知道大家有没有碰到过类似需求,或者有一些想法的希望能给个提示。

回答:

看下面的栗子把,看完你就明白了!

        
        <el-table-column label="升级状态">
                <template scope="scope">
                        <span v-if="scope.row.upgrade_resule=== 1">升级成功</span>
                        <span v-else style="color: red">升级失败</span>
               </template>
        </el-table-column>

回答:

在文档的基础上写了个例子,

通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据

然后根据你想要的动态绑定class就好了

<el-table-column label="姓名" width="180">
      <template scope="scope">
            <span v-bind:class="{active: (scope.row.name === '王小虎')}">{{ scope.row.name }}</span>
      </template>
</el-table-column>

完整例子在这里,改变了“王小虎”的颜色
https://jsfiddle.net/athena03…

本文地址:H5W3 » 【element-ui】element UI 表格问题:如何能让某个表格字体颜色变为指定色?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址