vxe-table 实现编辑表格的金额类型如果是负时,自动标记显示为红色字体

vxe-table 实现编辑表格的金额类型如果是负时,自动标记显示为红色字体,通过 edit-render.showNegativeStatus 启用负数自动显示红色字体,需要注意只要特定的控件才支持自动显示负数标红

html 复制代码
<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>

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

相关推荐
大猩猩X9 天前
vxe-gantt vue table 甘特图子任务多层级自定义模板用法
vue.js·甘特图·vxe-table·vxe-ui
大猩猩X10 天前
vue vxe-gantt table 甘特图实现多个维度视图展示,支持切换年视图、月视图、周视图等
前端·javascript·甘特图·vxe-table·vxe-ui
chenhdowue11 天前
如何使用 vxe-table 导出为带图片的单元格到 excel 格式文件
vue.js·excel·vxe-table·vxe-ui
大猩猩X14 天前
vxe-gantt 甘特图使用右键菜单
vue.js·vxe-table·vxe-ui·vxe-gantt
chenhdowue15 天前
vxe-table 数据校验的2种提示方式
vue.js·vxe-table·vxe-ui
daols8824 天前
vxe-table 如何实现跟 excel 一样的筛选框,支持字符串、数值、日期类型筛选
前端·javascript·excel·vxe-table
daols881 个月前
vxe-table 配置 ajax 加载列表数据,配置分页和查询搜索表单
vue.js·ajax·table·vxe-table
仰望.5 个月前
vxe-table 通过配置 ajax 方式自动请求数据,适用于简单场景的列表
vue.js·ajax·vxe-table·vxe-ui
daols885 个月前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table