var Main = {
data () {
return {
selectRecords: [],
gridOptions: {
class: 'mytable-style',
border: true,
resizable: true,
showHeaderOverflow: true,
showOverflow: true,
showFooter: true,
highlightHoverRow: true,
keepSource: true,
id: 'full_edit_1',
headerAlign: 'center',
height: 600,
rowId: 'id',
customConfig: {
storage: true,
checkMethod: this.checkColumnMethod
},
sortConfig: {
trigger: 'cell'
},
formConfig: {},
toolbar: {
buttons: [],
refresh: true,
zoom: true,
custom: true
},
columns: [
{ type: 'checkbox', align: 'center', width: 50, fixed: 'left' },
{ type: 'seq', title: '#', width: 50, align: 'center' },
{
field: 'client_no',
title: '客户编码',
width: 110,
fixed: 'left',
headerAlign: 'left',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'client_name',
title: '客户名称',
width: 200,
fixed: 'left',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '跟单员',
title: '跟单员',
width: 120,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '专营业务员名称',
title: '业务员',
width: 100,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '性质',
title: '性质',
width: 85,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '信用期限',
title: '信用期限',
width: 110,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '销售默认收付款协议名称',
title: '销售默认收付款协议',
width: 190,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '最后交易日期',
title: '最后交易日期',
width: 130,
align: 'center',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '应收余额',
title: '应收累计余额',
width: 130,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'invoice_all',
title: '累计已开发票金额',
width: 170,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'current_month_receipts',
title: '9月1日-7日回款金额',
titleHelp: { message: 't指制表提交当日，不晚于t-1日' },
width: 200,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'current_month_invoiced',
title: '9月1日-9日开票金额',
titleHelp: { message: 't指制表提交当日，不晚于t-1日' },
width: 200,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'current_month_invoiced_desc',
title: '9月1日-9日开票情况明细说明',
titleHelp: { message: 't指制表提交当日，不晚于t-1日' },
width: 200,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
title: '未到期情况',
children: [
{
field: 'invoiced_not_expired.price',
title: '已开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天; 1、用户想看具体明细可点击具体数值跳转到“已开票未回款（收款截止2020-n-30）”取数，只展现该客户开票情况，其他客户不体现' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'invoiced_not_expired.date',
title: '发票开具时间',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'uninvoiced_amount_not_expired',
title: '未开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'receivable_not_expired',
title: '小计',
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
title: '到期情况',
children: [
{
field: 'invoiced_maturity.price',
title: '已开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天; 1、用户想看具体明细可点击具体数值跳转到“已开票未回款（收款截止2020-n-30）”取数，只展现该客户开票情况，其他客户不体现' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'invoiced_maturity.date',
title: '发票开具时间',
width: 150,
align: 'center',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'uninvoiced_amount_receivable_maturity',
title: '未开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'receivable_maturity',
title: '小计',
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
title: '逾期情况',
children: [
{
title: '1个月',
children: [
{
field: 'invoice_overdue_1_month.price',
title: '已开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天; 1、用户想看具体明细可点击具体数值跳转到“已开票未回款（收款截止2020-n-30）”取数，只展现该客户开票情况，其他客户不体现' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'invoice_overdue_1_month.date',
title: '发票开具时间',
width: 150,
align: 'center',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'uninvoiced_amount_overdue_1_month',
title: '未开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'receivable_overdue_1_month',
title: '小计',
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
title: '2个月',
children: [
{
field: 'invoice_overdue_2_month.price',
title: '已开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天; 1、用户想看具体明细可点击具体数值跳转到“已开票未回款（收款截止2020-n-30）”取数，只展现该客户开票情况，其他客户不体现' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'invoice_overdue_2_month.date',
title: '发票开具时间',
width: 150,
align: 'center',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'uninvoiced_amount_overdue_2_month',
title: '未开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'receivable_overdue_2_month',
title: '小计',
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
title: '3个月',
children: [
{
field: 'invoice_overdue_3_month.price',
title: '已开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天; 1、用户想看具体明细可点击具体数值跳转到“已开票未回款（收款截止2020-n-30）”取数，只展现该客户开票情况，其他客户不体现' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'invoice_overdue_3_month.date',
title: '发票开具时间',
width: 150,
align: 'center',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'uninvoiced_amount_overdue_3_month',
title: '未开发票金额',
titleHelp: { message: '截止时间：n月自然天数最后一天' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'receivable_overdue_3_month',
title: '小计',
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
field: 'receivable_overdue_more_month',
title: '更多逾期情况分析',
titleHelp: { message: '1、更大逾期情况可追溯到2014年10月; 1、用户想看具体明细可点击具体数值跳转到“已开票未回款（收款截止2020-n-30）”取数，只展现该客户开票情况，其他客户不体现' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
field: '逾期总计',
title: '逾期总计',
children: [
{
field: 'receivable_overdue_all_month',
title: '逾期总金额',
titleHelp: { message: '1月逾期+2月逾期+3月逾期+更多逾期' },
width: 150,
headerAlign: 'center',
align: 'right',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'receivable_overdue_all_month_rate',
title: '更多逾期占总逾期总金额比例',
titleHelp: { message: '更多逾期金额 / 逾期总额' },
width: 240,
align: 'center',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'receivable_maturity_rate',
title: '逾期占已到期(到期+逾期总额)应收余额比例',
titleHelp: { message: '逾期总金额 / (逾期总金额+到期金额), 排序方式按照此列倒序排列' },
width: 320,
align: 'center',
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
field: '对账情况',
title: '对账情况',
children: [
{
field: 'n月发货对账情况',
title: 'n月发货对账情况',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'n-1月发货对账情况',
title: 'n-1月发货对账情况',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'n-x月发货对账情况',
title: 'n-x月发货对账情况',
titleHelp: { message: '1、n-x最早可拓展到上系统2014年10月；2、用户可自主选择所看到的月份(x≥6)）；3、对账情况的登记台账（之后可将对账在系统里操作完成，收集客户对账模板及对账要求及时间节点，能根据客户对账时间节点提醒对账，n月有发货未对账同样有提醒）' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '对账情况特殊说明',
title: '对账情况特殊说明',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '对账凭证情况',
title: '对账凭证情况',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
field: '近期发货情况',
title: '近期发货情况',
children: [
{
field: 'n-1月发货金额',
title: 'n-1月发货金额',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'n-2月发货金额',
title: 'n-2月发货金额',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: 'n-x月发货金额',
title: 'n-x月发货金额',
titleHelp: { message: '1、n-x最早可拓展到上系统2014年10月；2、用户可自主选择所看到的月份(x≥6）；' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '当年累计发货金额',
title: '当年累计发货金额',
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
field: '客户对账收款情况',
title: '客户对账收款情况',
titleHelp: { message: '此处点击进去是具体查询（对账方式、收款要求、开票要求、月结标准（发货、对账、开票等）、特殊注意情况）单独建立附表' }
},
{
field: '销售负责回复',
title: '销售负责回复',
children: [
{
field: '下月回款金额',
title: '下月回款金额',
children: [
{
field: '10号前',
title: '10号前',
titleHelp: { message: '该表格最终体现意见高亮标红（跟单主管无意见时选取跟单意见，跟单主管有意见时选取跟单主管意见）3、10号前回款小计=SUM(跟单意见或跟单主管意见高亮标红的数据)' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '20号前',
title: '20号前',
titleHelp: { message: '该表格最终体现意见高亮标红（跟单主管无意见时选取跟单意见，跟单主管有意见时选取跟单主管意见）3、20号前回款小计=SUM(跟单意见或跟单主管意见高亮标红的数据)' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '31号前',
title: '31号前',
titleHelp: { message: '该表格最终体现意见高亮标红（跟单主管无意见时选取跟单意见，跟单主管有意见时选取跟单主管意见）3、31号前回款小计=SUM(跟单意见或跟单主管意见高亮标红的数据)' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '合计',
title: '合计',
width: 90,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
},
{
field: '客户异常情况说明',
title: '客户异常情况说明',
titleHelp: { message: '此列跟单与跟单主管有编辑权限' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '客户评级或调整评级',
title: '客户评级或调整评级',
titleHelp: { message: '跟单主管有编辑权限' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '客户坏账情况说明及申请',
title: '客户坏账情况说明及申请',
titleHelp: { message: '跟单主管有编辑权限' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
},
{
field: '其他专业意见',
title: '其他专业意见',
titleHelp: { message: '财务应收、财务经理有编辑权限' },
width: 150,
sortable: true,
filters: [{
data: {
vals: [],
sVal: '',
fMenu: '',
f1Type: '',
f1Val: '',
fMode: 'and',
f2Type: '',
f2Val: ''
}
}],
}
]
}
],
headerCellClassName: this.headerCellClassName,
footerMethod: this.footerMethod,
footerSpanMethod: this.footerColspanMethod,
mergeCells: [],
checkboxConfig: {
reserve: true,
highlight: true,
range: true
}
}
}
},
created () {
var list = []
for(var index = 0; index < 15; index++){
list.push({
id: index + 10000,
name: 'test' + index,
role: 'developer',
sex: 'Man',
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
})
}
this.oldTableData = XEUtils.clone(list, true)
this.tableData = list
},
methods: {
// loadList (size) {
// this.loading = true
// let data = [
// { '序号': 1, '客户编码': 1080144, '客户名称': '东莞鼎业工业机械配件(原东莞东办）', '跟单员': '袁琴', '业务员': '钟全芬', '性质': '专用发票', '信用期限': 30, '销售默认收付款协议': '月结', '最后交易日期': '2020/7/3', '应收累计余额': ' 861,130.04 ', '累计已开发票金额': ' 369,711.20 ', '8月1日-5日回款金额': ' - ', '8月1日-5日开票金额': ' 256,863.20 ', '8月1日-5日开票情况明细说明': '2020年3月21日-4月22日货款（不含20200321006、20200422034）', '已开发票金额': ' - ', '发票开具时间': '——', '未开发票金额': ' - ', '小计': ' - ', '已经发票金额': ' - ', '发票开具时间': '——', '未开发票金额': ' 114,154.82 ', '小计': ' 114,154.82 ', '已经发票金额': ' - ', '发票开具时间': '——', '未开发票金额': ' 227,089.05 ', '小计': ' 227,089.05 ', '已经发票金额': ' - ', '发票开具时间': '——', '未开发票金额': ' 224,594.02 ', '小计': ' 224,594.02 ', '已经发票金额': ' 112,848.00 ', '发票开具时间': '2020/7/8', '未开发票金额': ' 182,444.15 ', '小计': ' 295,292.15 ', '收款特殊要求': '', 'n月发货对账情况': '财务未出对账函', 'n-1月发货对账情况': '财务已发对账函、客户已确认', '对账情况特殊说明': '', '对账凭证情况': '未收回对账函', '上月发货金额': ' 339,884.45 ', '上两个月发货金额': ' 596,103.16 ', '当年累计发货金额': ' 1,624,208.06 ', '10号前': '', '20号前': '', '30号前': '', '合计': ' - ', '客户异常情况说明': '', '客户评级或调整评级': '', '客户坏账情况说明及申请': '', '其他专业意见': '' }
// ]
// 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 (_columnIndex === 0) {
return { rowspan: 1, colspan: 3 }
} else if (_columnIndex === 1 || _columnIndex === 2) {
return { rowspan: 0, colspan: 0 }
}
},
checkColumnMethod ({ column }) {
if (['nickname', 'role'].includes(column.property)) {
return false
}
return true
},
checkboxChangeEvent ({ records }) {
this.isAllChecked = this.$refs.xGrid.isAllCheckboxChecked()
this.isIndeterminate = this.$refs.xGrid.isCheckboxIndeterminate()
this.selectRecords = records
}
}
};
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>
<script src="//unpkg.com/ve-ajax"></script>
<!-- 使用 umd 引用方式需要注意是否锁定版本，默认指向最新版本 -->
<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");
.mytable-style .vxe-header--column.col-blue {
background-color: #2db7f5;
color: #fff;
}
.page-left {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}