elementUI table表格el-table-column修改字体颜色

最新推荐文章于 2025-06-22 15:54:39 发布

原创最新推荐文章于 2025-06-22 15:54:39 发布 · 8.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #vue.js

本文介绍了如何在使用ElementUI的el-table组件时，通过自定义el-table-column来修改表格中文字的颜色。通过结合Vue.js的特性，实现动态控制表格单元格的字体颜色，从而提升表格展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子!

 <el-table-column
        prop="isOverText"
        label="结清状态"
        align="center"
        :show-overflow-tooltip="true"
        color:red
     / >
     //这个样子加颜色是没有用的!

正确的例子!

 <el-table-column
        prop="isOverText"
        label="结清状态"
        align="center"
        :show-overflow-tooltip="true"
      >
      //用插槽的方法来改变颜色!
        <template slot-scope="scope">
          <div :style="{ color: scope.row.isOverText ? 'red' : 'red' }">
            {{ scope.row.isOverText }}
          </div>
        </template>
      </el-table-column>