关于这个表格表尾合并的方法API
<vxe-grid
style="margin-top: 16px"
v-if="columnDrop2Params.isShowVxeTable"
v-bind="gridOptions"
class="sortable-column-demo"
ref="VxeTableRef"
@resizableChange="handleResizableChange"
@scroll="handleTableScroll"
>
</vxe-grid>
const gridOptions = reactive({
border: true,
stripe: true,
height: '660',
loading: false,
align: 'center',
showFooter: true, //开启表尾
showHeaderOverflow: true,
showOverflow: true,
columnConfig: {
resizable: true
},
rowConfig: {
isCurrent: false,
useKey: true
},
columns: [
{ type: 'seq', title: '序号', width: 240 },
{ field: 'sfa', title: '物料名称', width: 260 },
{ field: 'kdrq', title: '日期', width: 200 },
{ field: 'wer', title: '油罐车号', width: 200 },
{ field: 'ghjhgfd', title: '重车质量(t)', width: 160 },
{ field: 'sdada', title: '空车质量(t)', width: 160 },
{ field: 'hjtrgrg', title: '含水油质量(t)', width: 160 },
{ field: 'qweqwe', title: '含水率(%)', width: 160 },
{ field: 'weqweqwe', title: '纯油质量(t)', width: 160 },
{ field: 'kjhytr', title: '水量(t)', width: 160 }
],
data: [{}, {}],
footerMethod({ columns }) {
return [
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return '含水油量(t)(小写)'
}
if (columnIndex === 3) {
return '净油量(t)(小写)'
}
if (columnIndex === 4) {
return '111'
}
// if (['xs'].includes(column.field)) {
// return total.value
// }
// return ''
}),
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return '水量(t)(小写)'
}
if (columnIndex === 3) {
return '净油量(t)(大写)'
}
if (columnIndex === 4) {
return '1111'
}
// if (['xs'].includes(column.field)) {
// return total.value
// }
// return ''
}),
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return '采气一厂'
}
if (columnIndex === 1) {
return '油气储运公司'
}
if (columnIndex === 2) {
return '独山子石化分公司'
}
// if (['xs'].includes(column.field)) {
// return total.value
// }
// return ''
}),
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return '计量员签字'
}
if (columnIndex === 2) {
return '计量员签字'
}
if (columnIndex === 4) {
return '计量员签字'
}
// if (['xs'].includes(column.field)) {
// return total.value
// }
// return ''
})
]
},
footerSpanMethod({ $rowIndex, _columnIndex }) {
if ($rowIndex === 0) {
if (_columnIndex === 0) {
return {
rowspan: 1,
colspan: 2
}
}
if (_columnIndex === 3) {
return {
rowspan: 1,
colspan: 2
}
}
if (_columnIndex === 4) {
return {
rowspan: 1,
colspan: 4
}
}
} else if ($rowIndex === 1) {
if (_columnIndex === 0) {
return {
rowspan: 1,
colspan: 2
}
}
if (_columnIndex === 3) {
return {
rowspan: 1,
colspan: 2
}
}
if (_columnIndex === 4) {
return {
rowspan: 1,
colspan: 4
}
}
} else if ($rowIndex === 2) {
if (_columnIndex === 0) {
return {
rowspan: 1,
colspan: 4
}
}
if (_columnIndex === 1) {
return {
rowspan: 1,
colspan: 2
}
}
if (_columnIndex === 2) {
return {
rowspan: 1,
colspan: 4
}
}
} else if ($rowIndex === 3) {
if (_columnIndex === 0) {
return {
rowspan: 1,
colspan: 3
}
}
if (_columnIndex === 4) {
return {
rowspan: 1,
colspan: 2
}
}
if (_columnIndex === 5) {
return {
rowspan: 1,
colspan: 2
}
}
}
}
})
//改方法是为了表尾进行一个合计计算的值
// const sumFun = () => {
// total.value = 0
// gridOptions2.data.forEach((i) => {
// total.value += i.rcsl
// })
// VxeTableRef2.value.updateFooter(total.value)
// }