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 @ 2022-12-22 11:21  小严不言慢  阅读(290)  评论(0)    收藏  举报