el-table 如何动态的修改某一单元格中字体颜色

最新推荐文章于 2025-06-25 18:00:24 发布

原创最新推荐文章于 2025-06-25 18:00:24 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

功能专栏收录该内容

13 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue.js项目中利用Element UI库动态渲染表格数据。通过v-for指令遍历数据，设置表格列的对齐方式、宽度以及条件样式展示，实现了表格内容的完整展示。对于缺失数据的情况，使用了特殊样式进行高亮提示。

关键代码

 <el-table-column header-align="center" align="center" v-for="item in notFixedData" :key="item.prop"
               v-if="item.isTrue" :prop="item.prop" :label="item.title" :min-width="item.width">
   <template slot-scope="scope">
       <span v-if="scope.row[item.prop] !== '缺'">{{scope.row[item.prop]}}</span>
       <span v-else style="color: red;">{{scope.row[item.prop]}}</span>
   </template>
</el-table-column>