vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体

vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体，当输入的值为负数时，会自动显示红色字体，对于数值或者金额输入时该功能就非常有用了。

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

安装

 npm install vxe-pc-ui@4.3.92 vxe-table@4.11.6

// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...createApp(App).use(VxeUIAll).use(VxeUITable).mount('#app')
// ...

效果

代码

通过 edit-render.showNegativeStatus 启用负数自动显示红色字体

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({border: true,showOverflow: true,editConfig: {trigger: 'click',mode: 'cell'},columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },{ field: 'num1', title: '数值', editRender: { name: 'VxeNumberInput' } },{ field: 'num2', title: '数值（负数标红）', editRender: { name: 'VxeNumberInput', showNegativeStatus: true } },{ field: 'num3', title: '货币', align: 'right', editRender: { name: 'VxeNumberInput', props: { type: 'amount', align: 'right', showCurrency: true } } },{ field: 'num4', title: '货币（负数标红）', align: 'right', editRender: { name: 'VxeNumberInput', showNegativeStatus: true, props: { type: 'amount', align: 'right', showCurrency: true } } }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc', num1: 10000000, num2: 10000000, num3: 10000000, num4: 10000000 },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou', num1: -20000, num2: -20000, num3: -20000, num4: -20000 },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai', num1: null, num2: null, num3: null, num4: null },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', num1: 0, num2: 0, num3: 0, num4: 0 }]
})
</script>

支持复制到 Excel（企业版）

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const gridOptions = reactive({border: true,height: 500,showOverflow: true,columnConfig: {resizable: true},editConfig: {mode: 'cell', // 单元格编辑模式trigger: 'dblclick' // 双击单元格激活编辑状态},mouseConfig: {area: true // 是否开启区域选取},keyboardConfig: {isClip: true, // 是否开启复制粘贴},columns: [{ type: 'seq', width: 60 },{ field: 'name', title: '名字', editRender: { name: 'VxeInput' } },{ field: 'num1', title: '货币类型', align: 'right', editRender: { name: 'VxeNumberInput', props: { type: 'amount', align: 'right' } } },{ field: 'num2', title: '货币类型（带货币符号）', align: 'right', editRender: { name: 'VxeNumberInput', props: { type: 'amount', align: 'right', showCurrency: true } } },{ field: 'num3', title: '货币类型（负数自动标红）', align: 'right', editRender: { name: 'VxeNumberInput', showNegativeStatus: true, props: { type: 'amount', align: 'right', showCurrency: true } } }],data: [{ id: 10001, name: '张三', code1: '0002365', code2: '0002365', num1: -3.56, num2: -3.56, num3: -3.56, num4: -3.56 },{ id: 10002, name: '李四', code1: '0002465', code2: '0002465', num1: 1, num2: 1, num3: 1, num4: 1 },{ id: 10003, name: '老六', code1: '0002567', code2: '0002567', num1: 1235640, num2: 1235640, num3: 1235640, num4: 1235640 },{ id: 10004, name: '小李', code1: '0678865', code2: '0678865', num1: -96300000.4, num2: -96300000.4, num3: -96300000.4, num4: -96300000.4 },{ id: 10005, name: '老万', code1: '23470565', code2: '23470565', num1: 240.63, num2: 240.63, num3: 240.63, num4: 240.63 },{ id: 10006, name: '小刘', code1: '086222135', code2: '086222135', num1: 0.1, num2: 0.1, num3: 0.1, num4: 0.1 },{ id: 10007, name: '老徐', code1: '3600665', code2: '3600665', num1: 0, num2: 0, num3: 0, num4: 0 },{ id: 10008, name: '老二', code1: '009635', code2: '009635', num1: null, num2: null, num3: null, num4: null },{ id: 10009, name: '小牛', code1: '09034523', code2: '09034523', num1: 100000000, num2: 100000000, num3: 100000000, num4: 100000000 },{ id: 10010, name: '小帅', code1: '872220222', code2: '872220222', num1: null, num2: null, num3: null, num4: null },{ id: 10011, name: '老魏', code1: '10022354', code2: '10022354', num1: 96342, num2: 96342, num3: 96342, num4: 96342 },{ id: 10012, name: '小徐', code1: '0009785', code2: '0009785', num1: -740000, num2: -740000, num3: -740000, num4: -740000 }]
})
</script>

https://gitee.com/x-extends/vxe-table