Vue怎么改变table的colum的样式

在table中设定 :cell-class-name="cellClassName"

template:

<vxe-table border
                   class="mytable-style m-t-2"
                   :cell-class-name="cellClassName"
                   :data="list">

 

script:

复制代码
cellClassName({ row, column }) {
                var tmpClassName = 'col-grey';
                if (['phase1', 'phase2', 'phase3', 'phase4'].includes(column.property)) {
                    var tmpPhaseName = '';
                    switch (column.property) {
                        case 'phase1':
                            tmpPhaseName = row.phase1;
                            break;
                        case 'phase2':
                            tmpPhaseName = row.phase2;
                            break;
                        case 'phase3':
                            tmpPhaseName = row.phase3;
                            break;
                        case 'phase4':
                            tmpPhaseName = row.phase4;
                            break;
                        default:
                            tmpPhaseName = row.phase1;
                            break;
                    }
                    switch (tmpPhaseName) {
                        case 1:
                            tmpClassName = 'col-green';
                            break;
                        case 2:
                            tmpClassName = 'col-yellow';
                            break;
                        case 3:
                            tmpClassName = 'col-grey';
                            break;
                        default:
                            tmpClassName = 'col-grey';
                            break;
                    }
                    return tmpClassName;
                }


            },
复制代码

 

posted @   小严不言慢  阅读(260)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示