Vue中的vxe-table教程11-全局格式化内容
知识点：1. 格式化性别2. 格式化下拉选项3. 格式化日期，默认 yyyy-MM-dd HH:mm:ss4. 四舍五入金额，每隔3位逗号分隔，默认2位数5. 格式化银行卡，默认每4位空格隔开6. 四舍五入,默认两位数7. 向下舍入,默认两位数8. 转换 moment 类型为字符串效果图：1. index.html代码<!DOCTYPE html><html lang="en"&
·
知识点：
1. 格式化性别 2. 格式化下拉选项 3. 格式化日期，默认 yyyy-MM-dd HH:mm:ss 4. 四舍五入金额，每隔3位逗号分隔，默认2位数 5. 格式化银行卡，默认每4位空格隔开 6. 四舍五入,默认两位数 7. 向下舍入,默认两位数 8. 转换 moment 类型为字符串
效果图：
1. index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>
<body>
<div id="app">
<template>
<div style="padding: 20px 50px 0 50px">
<!--
-->
<vxe-table
border
:data="tableData">
<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
<vxe-table-column field="date" sortable title="转日期" width="180" formatter="formatDate"></vxe-table-column>
<vxe-table-column field="time" sortable title="转日期格式" width="140"
:formatter="['formatDate', 'yyyy-MM-dd']"></vxe-table-column>
<vxe-table-column field="amount" title="格式化金额" formatter="formatAmount"></vxe-table-column>
<vxe-table-column field="bankCard" sortable title="银行卡" width="180"
formatter="formatBankcard"></vxe-table-column>
<vxe-table-column field="num7" sortable title="数值"></vxe-table-column>
<vxe-table-column field="num8" sortable title="截取2位数" formatter="formatCutNumber"></vxe-table-column>
<vxe-table-column field="num9" sortable title="四舍五入2位数" formatter="formatFixedNumber"></vxe-table-column>
<vxe-table-column field="sex" sortable title="格式化性别" formatter="formatSex"></vxe-table-column>
</vxe-table>
</div>
</template>
</div>
</body>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>
2. main.css代码
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}
3. main.js代码
// 自定义全局的格式化处理函数
VXETable.formats.mixin({
// 格式化性别
formatSex({cellValue}) {
return cellValue ? (cellValue === '1' ? '男' : '女') : ''
},
// 格式化下拉选项
formatSelect({cellValue}, list) {
const item = list.find(item => item.value === cellValue);
return item ? item.label : ''
},
// 格式化日期，默认 yyyy-MM-dd HH:mm:ss
formatDate({cellValue}, format) {
return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')
},
// 四舍五入金额，每隔3位逗号分隔，默认2位数
formatAmount({cellValue}, digits = 2) {
return XEUtils.commafy(XEUtils.toNumber(cellValue), {digits})
},
// 格式化银行卡，默认每4位空格隔开
formatBankcard({cellValue}) {
return XEUtils.commafy(XEUtils.toString(cellValue), {spaceNumber: 4, separator: ' '})
},
// 四舍五入,默认两位数
formatFixedNumber({cellValue}, digits = 2) {
return parseFloat(XEUtils.toFixed(XEUtils.round(cellValue, digits), digits))
},
// 向下舍入,默认两位数
formatCutNumber({cellValue}, digits = 2) {
return parseFloat(XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits))
},
// 转换 moment 类型为字符串
toMomentString({cellValue}, format) {
return cellValue ? cellValue.format(format) : ''
}
});
var Main = {
data() {
return {
tableData: [
{
id: 10001,
name: 'Test1',
bankCard: '6222525678789432',
sex: '0',
time: 1599320111520,
date: '2020-11-14T07:14:41.000Z',
amount: 998.3,
num: 863.345,
num7: 863.345,
num8: 863.345,
num9: 863.345
},
{
id: 10002,
name: 'Test2',
bankCard: '6222525675674564',
sex: '1',
time: 1590820967410,
date: '2022-10-24T08:14:18.000Z',
amount: 777776536.3,
num: 854.7789,
num7: 854.7789,
num8: 854.7789,
num9: 854.7789
},
{
id: 10003,
name: 'Test3',
bankCard: '6222525477686963',
sex: '0',
time: 1599390785410,
date: '2020-09-04T06:08:25.000Z',
amount: 253.486,
num: 963.1456,
num7: 963.1456,
num8: 963.1456,
num9: 963.1456
},
{
id: 10004,
name: 'Test4',
bankCard: '6222525678678946',
sex: '1',
time: 1597385230710,
date: '2019-10-20T20:40:20.000Z',
amount: 9990000.66,
num: 963.9856,
num7: 963.9856,
num8: 963.9856,
num9: 963.9856
},
{
id: 10005,
name: 'Test5',
bankCard: '6222525478909009',
sex: '0',
time: 1591627586920,
date: '2020-09-17T11:14:18.000Z',
amount: 10000.35,
num: 99.845632,
num7: 99.845632,
num8: 99.845632,
num9: 99.845632
},
{
id: 10006,
name: 'Test6',
bankCard: '6222525789898793',
sex: '1',
time: 1599728569710,
date: '2021-01-04T10:12:18.000Z',
amount: 999,
num: 698.3689,
num7: 698.3689,
num8: 698.3689,
num9: 698.3689
},
{
id: 10007,
name: 'Test7',
bankCard: '6222525476534534',
sex: '1',
time: 1590740052710,
date: '2020-08-10T08:14:18.000Z',
amount: 458666.3,
num: 1000.3658,
num7: 1000.3658,
num8: 1000.3658,
num9: 1000.3658
},
{
id: 10008,
name: 'Test8',
bankCard: '6222525445554231',
sex: '0',
time: 1599320425610,
date: '2020-05-04T07:17:30.000Z',
amount: 79999935.6,
num: 600053.32845,
num7: 600053.32845,
num8: 600053.32845,
num9: 600053.32845
}
]
}
},
methods: {},
};
var app = new Vue(Main).$mount('#app');
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献21条内容
所有评论(0)