v-if vxe-grid cellRender 返回class不生效，想根据值的范围改变颜色（cellRender that returns a html tag is not working）

[marissagroves]

（必填）请填写问题描述 Describe

v-if 中vxe-grid cellRender 返回class不生效，想根据值的范围改变颜色。 同样的配置，在vxe-table里面是生效的, 改成vxe-table就不生效了。 Need help in finding the correct config in vxe-grid. Can anyone help me?

（必填）请填写能重现问题的链接，例如（jsfiddle、codesandbox、jsrun） Reproduction link

VXETable.renderer.add('allocatedRate', { // 默认显示模板 renderDefault(h, renderOpts, params) { const { row, column } = params; const { service, decimals } = renderOpts.props; if (row[column.property] >= whiteList[service].RES_RATE) { return [ <span class="up">{percent(row[column.property], decimals)}</span> ]; } else { return [ <span class="down">{percent(row[column.property], decimals)}</span> ]; } } }); ... { field: 'allocatedRate', title: '分配率', sortable: true, filters: [{ data: { type: 'has', isCase: true, name: '' } }], filterRender: { name: 'FilterComplex' }, cellRender: { name: 'allocatedRate', props: { service: 'ECS', decimals: 2 } } } ... .up { color: green; font-weight: bold; } .down { color: red; font-weight: bold; }

请填写报错信息或截图 Error message or screenshots

1.Vxe grid config:

2. Add allocatedRate in renderer:
3. Config in the table columns:
4. CSS: .up { color: green; font-weight: bold; } .down { color: red; font-weight: bold; } 5: Expected result:
5. Actual effect:

（必填）请填写版本号 Version

• os: Windows 10 professional
• browser: Chrome 版本 83.0.4103.61（正式版本） （64 位）
• vue: @vue/cli 4.3.1
• vxe-table:
  "vxe-table": "^2.9.7", "vxe-utils": "^1.9.3", "xe-utils": "^2.4.5"

[marissagroves]

I changed the return JSX style to the following: VXETable.renderer.add('allocatedRate', { // 默认显示模板 renderDefault(h, renderOpts, params) { const { row, column } = params; const { service, decimals } = renderOpts.props; if (row[column.property] >= whiteList[service].RES_RATE) { return [ <span style={{ color: 'green', 'font-weight': 'bold' }}> {percent(row[column.property], decimals)} </span> ]; } else { return [ <span style={{ color: 'red', 'font-weight': 'bold' }}> {percent(row[column.property], decimals)} </span> ]; } } }); And then it was solved...