vue+element ui 改变表格el-table中字体的颜色，改变el-table中某一列的样式_vue3 el-table-column 修改特定某行的文字颜色

通常我们在使用el-table时，使用的代码：

<template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
</template>

呈现的表格为

（以上代码和图片均来自element ui 官网）

那如果我想要改变表格里某个列的颜色或者其他样式应该怎么办？

我有尝试过使用 Element UI 提供的 row-class-name 属性来为表格中的每一行添加自定义的类名，然后在 CSS 中为这个类名设置字体颜色，但是没有成功。

后面干脆用了个可能不太理想，但是是我能快速想到的方法：使用 slot-scope

具体实现如下：

<el-table-column prop="date" label="日期" width="180">
      <template slot-scope="scope">
        <span style="color: red; font-weight: bold;">
          {{ scope.row.date }}
        </span>
      </template>
    </el-table-column>

把要改变样式的列的 el-table-column 使用 slot-scope 并用 span 标签设置 style 就可以了，注意需要结合{{ scope.row.date }}使用，这样表格的 date 列就变为红色且加粗了。

如图：

当然你也可以根据自己的需要改一些别的样式。

菜鸟仅仅只是做个笔记，如果我有哪里说错的请大家批评指正，如果有更好的方法也欢迎大家安利！感谢观看，希望这篇笔记可以帮到你