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