console
console.log(XEUtils.isDate(XEUtils.toStringDate('abc')))
var Main = {
data() {
return {
gridOptions: {
class: "mytable-style",
border: true,
resizable: true,
showHeaderOverflow: true,
showOverflow: true,
showFooter: true,
highlightHoverRow: true,
keepSource: true,
id: 'full_edit_1',
height: 600,
rowId: 'id',
customConfig: {
storage: true,
checkMethod: this.checkColumnMethod
},
printConfig: {
columns: [
{ field: 'name' },
{ field: 'email' },
{ field: 'nickname' },
{ field: 'age' },
{ field: 'amount' }
]
},
sortConfig: {
trigger: 'cell'
},
formConfig: {
},
toolbar: {
buttons: [],
refresh: true,
print: true,
zoom: true,
custom: true
},
columns: [
{ field: '序号', title: '序号'},
{ field: '跟单员', title: '跟单员', children: [
{ field: '姓名', title: '姓名'},
{ field: '项目', title: '项目'},
]},
{ field: '已发货未收款总金额', title: '已发货未收款总金额'},
{ field: '已发货未到期货款总额', title: '已发货未到期货款总额'},
{ field: '已发货已到期货款总额', title: '已发货已到期货款总额'},
{ field: '已发货已逾期货款', title: '已发货已逾期货款', children: [
{ field: '逾期1个月货款总额', title: '逾期1个月货款总额'},
{ field: '逾期2个月货款总额', title: '逾期2个月货款总额'},
{ field: '逾期3个月及以上货款总额', title: '逾期3个月及以上货款总额'},
{ field: '已发货已逾期货款总额', title: '已发货已逾期货款总额'},
]},
],
headerCellClassName: this.headerCellClassName,
footerMethod: this.footerMethod,
footerSpanMethod: this.footerColspanMethod,
mergeCells: [
{ row: 0, col: 1, rowspan: 3, colspan: 0 },
{ row: 0, col: 0, rowspan: 3, colspan: 0 },
{ row: 3, col: 1, rowspan: 3, colspan: 0 },
{ row: 3, col: 0, rowspan: 3, colspan: 0 },
],
exportConfig: {
remote: true,
exportMethod: this.exportMethod,
types: ['xlsx'],
modes: ['current', 'selected', 'all']
},
checkboxConfig: {
labelField: 'id',
reserve: true,
highlight: true,
range: true
},
editRules: {
name: [
{ required: true, message: 'app.body.valid.rName' },
{ min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
],
email: [
{ required: true, message: '邮件必须填写' }
],
role: [
{ required: true, message: '角色必须填写' }
]
},
editConfig: {
trigger: 'click',
mode: 'row',
showStatus: true
}
}
}
},
methods: {
loadList (size) {
this.loading = true
let data = [
{
"序号": 1,
"姓名": '梁彩仪',
"项目": '应收款',
"已发货未收款总金额": '43,811.08',
"已发货未到期货款总额": '- -',
"已发货已到期货款总额": '9,597.30',
"逾期1个月货款总额": '5176.25',
"逾期2个月货款总额": '8037.53',
"逾期3个月及以上货款总额": '21000',
"已发货已逾期货款总额": '34213.78',
},
{
"序号": 1,
"姓名": '梁彩仪',
"项目": '预收款',
"已发货未收款总金额": '- -',
"已发货未到期货款总额": '- -',
"已发货已到期货款总额": '- -',
"逾期1个月货款总额": '- -',
"逾期2个月货款总额": '- -',
"逾期3个月及以上货款总额": '- -',
"已发货已逾期货款总额": '- -',
},
{
"序号": 1,
"姓名": '梁彩仪',
"项目": '小计',
"已发货未收款总金额": '43,811.08',
"已发货未到期货款总额": '- -',
"已发货已到期货款总额": '9,597.30',
"逾期1个月货款总额": '5176.25',
"逾期2个月货款总额": '8037.53',
"逾期3个月及以上货款总额": '21000',
"已发货已逾期货款总额": '34213.78',
},
{
"序号": 2,
"姓名": '梁盼英',
"项目": '应收款',
"已发货未收款总金额": '45,405.66',
"已发货未到期货款总额": '58,483.23',
"已发货已到期货款总额": '5,402.80',
"逾期1个月货款总额": '',
"逾期2个月货款总额": '',
"逾期3个月及以上货款总额": '1947.93',
"已发货已逾期货款总额": '1947.93',
},
{
"序号": 1,
"姓名": '梁彩仪',
"项目": '预收款',
"已发货未收款总金额": '- -',
"已发货未到期货款总额": '- -',
"已发货已到期货款总额": '- -',
"逾期1个月货款总额": '- -',
"逾期2个月货款总额": '- -',
"逾期3个月及以上货款总额": '- -',
"已发货已逾期货款总额": '- -',
},
{
"序号": 1,
"姓名": '梁彩仪',
"项目": '小计',
"已发货未收款总金额": '43,811.08',
"已发货未到期货款总额": '- -',
"已发货已到期货款总额": '9,597.30',
"逾期1个月货款总额": '5176.25',
"逾期2个月货款总额": '8037.53',
"逾期3个月及以上货款总额": '21000',
"已发货已逾期货款总额": '34213.78',
}
]
const xTable = this.$refs.xTable
this.$refs.xGrid.reloadData(data)
this.loading = false
},
headerCellClassName ({ column, columnIndex }) {
if (column.property === '跟单员') {
return 'col-blue'
}
if (column.property === '姓名') {
return 'col-blue'
}
if (column.property === '项目') {
return 'col-blue'
}
},
footerMethod ({ columns, data }) {
return [
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return '应收款合计'
}
return null
}),
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return '预收款合计'
}
return null
}),
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return '合计'
}
return null
})
]
},
footerColspanMethod ({ $rowIndex, columnIndex }) {
if ($rowIndex === 0) {
if (columnIndex === 0) {
return { rowspan: 1, colspan: 3 }
}
}
},
formatAmount ({ cellValue }) {
return cellValue ? `$${XEUtils.commafy(XEUtils.toNumber(cellValue), { digits: 2 })}` : ''
},
formatDate ({ cellValue }) {
return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
},
checkColumnMethod ({ column }) {
if (['nickname', 'role'].includes(column.property)) {
return false
}
return true
},
exportMethod ({ options }) {
const proxyInfo = this.$refs.xGrid.getProxyInfo()
const body = {
filename: options.filename,
sheetName: options.sheetName,
isHeader: options.isHeader,
original: options.original,
mode: options.mode,
ids: options.mode === 'selected' ? options.data.map(item => item.id) : [],
fields: options.columns.map(column => {
return {
field: column.property,
title: column.title
}
})
}
return XEAjax.post('', body).then(data => {
if (data.id) {
this.$XModal.message({ message: '导出成功，开始下载', status: 'success' })
location.href = ``
}
}).catch(() => {
this.$XModal.message({ message: '导出失败！', status: 'error' })
})
}
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="//unpkg.com/vue">
</script>
<script src="//unpkg.com/xe-utils">
</script>
<script src="//unpkg.com/vxe-table">
</script>
<div id="app">
<template>
<div>
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
</div>
</template>
</div>
@import url("//unpkg.com/vxe-table/lib/index.css");