使用 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.5.23 vxe-table@4.13.4

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')

格式化金額

通過內置的 FormatNumberInput 格式化數值渲染器，配置 type = amount 為貨幣類型就可以了

在這里插入圖片描述

<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,columns: [{ type: 'seq', width: 60 },{ field: 'name', title: '名字' },{ field: 'num1', title: '貨幣類型', align: 'right', cellRender: { name: 'FormatNumberInput', props: { type: 'amount', align: 'right' } } },{ field: 'num2', title: '貨幣類型（帶貨幣符號）', align: 'right', cellRender: { name: 'FormatNumberInput', props: { type: 'amount', align: 'right', showCurrency: true } } },{ field: 'num3', title: '貨幣類型（負數自動標紅）', align: 'right', cellRender: { name: 'FormatNumberInput', 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, str1: '10,000,000.00', str2: '10,000,000.00' },{ id: 10002, name: '李四', code1: '0002465', code2: '0002465', num1: 1, num2: 1, num3: 1, num4: 1, str1: '90,000,000.00', str2: '90,000,000.00' },{ id: 10003, name: '老六', code1: '0002567', code2: '0002567', num1: 1235640, num2: 1235640, num3: 1235640, num4: 1235640, str1: '100,000', str2: '100,000' },{ id: 10004, name: '小李', code1: '0678865', code2: '0678865', num1: -96300000.4, num2: -96300000.4, num3: -96300000.4, num4: -96300000.4, str1: '', str2: '' },{ id: 10005, name: '老萬', code1: '23470565', code2: '23470565', num1: 240.63, num2: 240.63, num3: 240.63, num4: 240.63, str1: '', str2: '' },{ id: 10006, name: '小劉', code1: '086222135', code2: '086222135', num1: 0.1, num2: 0.1, num3: 0.1, num4: 0.1, str1: '', str2: '' },{ id: 10007, name: '老徐', code1: '3600665', code2: '3600665', num1: 0, num2: 0, num3: 0, num4: 0, str1: '330.02', str2: '330.02' },{ id: 10008, name: '老二', code1: '009635', code2: '009635', num1: null, num2: null, num3: null, num4: null, str1: '10,000,000.33', str2: '10,000,000.33' },{ id: 10009, name: '小牛', code1: '09034523', code2: '09034523', num1: 100000000, num2: 100000000, num3: 100000000, num4: 100000000, str1: '', str2: '' },{ id: 10010, name: '小帥', code1: '872220222', code2: '872220222', num1: null, num2: null, num3: null, num4: null, str1: '1,230.30', str2: '1,230.30' },{ id: 10011, name: '老魏', code1: '10022354', code2: '10022354', num1: 96342, num2: 96342, num3: 96342, num4: 96342, str1: '', str2: '' },{ id: 10012, name: '小徐', code1: '0009785', code2: '0009785', num1: -740000, num2: -740000, num3: -740000, num4: -740000, str1: '', str2: '' }]
})
</script>

導出到 excel

支持導出分組表頭、合并、單元格類型、導出圖片等格式
在這里插入圖片描述

<template><div><vxe-button status="primary" @click="exportEvent">高級導出</vxe-button><vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { ref, reactive } from 'vue';const gridRef = ref();const imgUrlCellRender = reactive({name: 'VxeImage',props: {width: 36,height: 36}
});const gridOptions = reactive({border: true,showFooter: true,showOverflow: true,editConfig: {trigger: 'click',mode: 'cell'},mergeCells: [{ row: 0, col: 2, rowspan: 1, colspan: 2 },{ row: 2, col: 2, rowspan: 2, colspan: 1 }],exportConfig: {type: 'xlsx'},columns: [{ field: 'checkbox', type: 'checkbox', width: 70 },{ field: 'seq', type: 'seq', width: 70 },{ field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },{ field: 'code', title: '字符串類型', cellType: 'string', editRender: { name: 'VxeInput' } },{title: '分組1',children: [{ field: 'num1', title: '數值', editRender: { name: 'VxeNumberInput', props: { type: 'float' } } },{ field: 'num2', title: '數值（負數標紅）', editRender: { name: 'VxeNumberInput', showNegativeStatus: true, props: { type: 'float' } } }]},{ field: 'amount1', title: '貨幣', editRender: { name: 'VxeNumberInput', props: { type: 'amount', showCurrency: true } } },{ field: 'amount2', title: '貨幣（負數標紅）', editRender: { name: 'VxeNumberInput', showNegativeStatus: true, props: { type: 'amount', showCurrency: true } } },{ field: 'imgUrl', title: '圖片', width: 80, cellRender: imgUrlCellRender }],data: [{ id: 10001, name: '張三', code: '000528697411', num1: 0.32, num2: -0.11, amount1: 1000000000, amount2: -0.11, imgUrl: 'https://vxeui.com/resource/img/fj586.png' },{ id: 10002, name: '李四', code: '001236598563', num1: null, num2: 100000, amount1: -990000, amount2: 4, imgUrl: 'https://vxeui.com/resource/img/fj573.jpeg' },{ id: 10003, name: '王五', code: '001499675653', num1: 100000, num2: null, amount1: 1, amount2: 100000, imgUrl: 'https://vxeui.com/resource/img/fj567.jpeg' },{ id: 10004, name: '老六', code: '002568967545', num1: -0.11, num2: 1000000000, amount1: null, amount2: 1000000000, imgUrl: 'https://vxeui.com/resource/img/fj577.jpg' },{ id: 10005, name: '小七', code: '005233368777', num1: -990000, num2: 28, amount1: 100000, amount2: null, imgUrl: 'https://vxeui.com/resource/img/bq673.gif' },{ id: 10006, name: '小八', code: '000369877575', num1: 1000000000, num2: -990000, amount1: -0.11, amount2: -990000, imgUrl: 'https://vxeui.com/resource/img/fj124.jpeg' }],footerData: [{ checkbox: '合計', name: '12人', no1: 356 }]
});const exportEvent = () => {const $grid = gridRef.value;if ($grid) {$grid.openExport();}
};
</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,mouseConfig: {area: true // 是否開啟區域選取},keyboardConfig: {isClip: true,isArrow: true,isShift: true,isTab: true,isEnter: true,isFNR: true // 是否開啟查找與替換},columns: [{ type: 'seq', width: 60 },{ field: 'name', title: '名字' },{ field: 'num1', title: '貨幣類型', align: 'right', cellRender: { name: 'FormatNumberInput', props: { type: 'amount', align: 'right' } } },{ field: 'num2', title: '貨幣類型（帶貨幣符號）', align: 'right', cellRender: { name: 'FormatNumberInput', props: { type: 'amount', align: 'right', showCurrency: true } } },{ field: 'num3', title: '貨幣類型（負數自動標紅）', align: 'right', cellRender: { name: 'FormatNumberInput', 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, str1: '10,000,000.00', str2: '10,000,000.00' },{ id: 10002, name: '李四', code1: '0002465', code2: '0002465', num1: 1, num2: 1, num3: 1, num4: 1, str1: '90,000,000.00', str2: '90,000,000.00' },{ id: 10003, name: '老六', code1: '0002567', code2: '0002567', num1: 1235640, num2: 1235640, num3: 1235640, num4: 1235640, str1: '100,000', str2: '100,000' },{ id: 10004, name: '小李', code1: '0678865', code2: '0678865', num1: -96300000.4, num2: -96300000.4, num3: -96300000.4, num4: -96300000.4, str1: '', str2: '' },{ id: 10005, name: '老萬', code1: '23470565', code2: '23470565', num1: 240.63, num2: 240.63, num3: 240.63, num4: 240.63, str1: '', str2: '' },{ id: 10006, name: '小劉', code1: '086222135', code2: '086222135', num1: 0.1, num2: 0.1, num3: 0.1, num4: 0.1, str1: '', str2: '' },{ id: 10007, name: '老徐', code1: '3600665', code2: '3600665', num1: 0, num2: 0, num3: 0, num4: 0, str1: '330.02', str2: '330.02' },{ id: 10008, name: '老二', code1: '009635', code2: '009635', num1: null, num2: null, num3: null, num4: null, str1: '10,000,000.33', str2: '10,000,000.33' },{ id: 10009, name: '小牛', code1: '09034523', code2: '09034523', num1: 100000000, num2: 100000000, num3: 100000000, num4: 100000000, str1: '', str2: '' },{ id: 10010, name: '小帥', code1: '872220222', code2: '872220222', num1: null, num2: null, num3: null, num4: null, str1: '1,230.30', str2: '1,230.30' },{ id: 10011, name: '老魏', code1: '10022354', code2: '10022354', num1: 96342, num2: 96342, num3: 96342, num4: 96342, str1: '', str2: '' },{ id: 10012, name: '小徐', code1: '0009785', code2: '0009785', num1: -740000, num2: -740000, num3: -740000, num4: -740000, str1: '', str2: '' }]
})
</script>