ElementUI el-table 自定义cell-style

原创已于 2025-08-13 17:25:08 修改 · 5.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #cell-style

于 2022-01-24 11:40:08 首次发布

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在ElementUI的el-table组件中实现自定义cell-style，通过判断同比（tb）和环比（hb）数值，为表格第五列和第六列设置相应的颜色样式。

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

下面代码功能主要判断第五列以及第六列的颜色，tb为同比数值，hb为环比数值，最终赋予对应的样式。

cellStyle(row, column, rowIndex, columnIndex) {
                //正常情况
                var style = {
                    'border-color': '#BECDDC',
                    color: 'black',
                    fontSize: '0.72916666vw',
                    height: '10px'
                };
                //提升 情况
                var styleUp = {
                    'border-color': '#BECDDC',
                    color: 'black',
                    fontSize: '0.72916666vw',
                    height: '10px',
                    'background-color': 'green'
                };
                //下降情况
                var styleDown = {
                    'border-color': '#BECDDC',
                    color: 'black',
                    fontSize: '0.72916666vw',
                    height: '10px',
                    'background-color': 'red'
                };
                if (row.columnIndex == 4 && row.row.tb > 0) {
                    return styleUp;
                }
                if (row.columnIndex == 4 && row.row.tb < 0) {
                    return styleDown;
                }
                if (row.columnIndex == 5 && row.row.hb > 0) {
                    return styleUp;
                }
                if (row.columnIndex == 5 && row.row.hb < 0) {
                    return styleDown;
                }
                return style;
            }