JeecgBoot列表页字段颜色自定义

TIP

JeecgBoot根据数据表生成的分页查询列表页的字段是没有颜色，如果我们的业务场景。比如审批状态要根据不同状态产生不同的颜色，该怎么做呢？

如图实现状态颜色根据审批状态，变换不同的颜色。

import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import { rules} from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';\

export const columns: BasicColumn[] = [
    {
        title: '审批状态',
        dataIndex: 'processStatusText'
   },
]

这个是代码生成的效果

import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import { rules} from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
//1.添加这个
import { h } from 'vue';
export const columns: BasicColumn[] = [
    {
        title: '审批状态',
        dataIndex: 'processStatusText',
        customRender: ({text}) => { 
        let myColor = "#67C23A";
        if(text === '待审批'){
            myColor = "#67C23A";
        } else if(text === '已批准'){
            myColor = "#409EFF";
        } else if(text === '未批准'){
            myColor = "#E6A23C";
        } else if(text === '已拒绝'){
            myColor = "#F56C6C";
        } else {
            myColor = "#409EFF";
        }
        return h('font', { color: myColor}, text)
        },  
   },
]

以上就是修改之后的字段根据文本内容进行变化的效果。