效果如下:
最重要的属性配置
show-footer //是否显示尾部
:merge-footer-items="mergeFooterItems" //表尾合并规则
:footer-cell-class-name="footerCellClassName"//表尾样式
:footer-method="footerMethod" //最重要的部分,计算表尾的数据并渲染到页面
详细代码如下
html部分
<vxe-table
show-footer //展示尾部
ref="xTableData"
:print-config="{}"
:merge-footer-items="mergeFooterItems" //表尾合并规则
:footer-cell-class-name="footerCellClassName"//表尾样式
:footer-method="footerMethod" //最重要的部分,计算表尾的数据并渲染到页面
:loading="loading"
:data="tableData"
:export-config="{}"
>
</vxe-table>
js部分
data() {
return {
mergeFooterItems: [
{ row: 0, col: 0, rowspan: 1, colspan: 2 },
{ row: 1, col: 0, rowspan: 1, colspan: 2 },
{ row: 2, col: 0, rowspan: 1, colspan: 2 },
{ row: 3, col: 0, rowspan: 1, colspan: 2 },
],
}
}
footerMethod({ columns, data }) {
const footerData = [
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "平均分";
}
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
if (_columnIndex === i) {
return this.sumNum(data, column.property, "1");
}
}
return null;
}),
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "平均分";
}
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
if (_columnIndex === i) {
return this.sumNum(data, column.property, "2");
}
}
return null;
}),
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "得分";
}
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
return this.meanNum(data, column.property);
}
return null;
}),
];
footerData.push(
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "排 序";
}
let footerData2 = this.vateUtils.judgeType.deepClone(footerData)[2];
footerData2.splice(0, 2);
let scoreSortList = [];
footerData2.forEach((ele, index) => {
scoreSortList.push({ [index.toString()]: ele });
});
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
if (_columnIndex === i) {
return this.sortSore(scoreSortList, _columnIndex - 2);
}
}
})
);
return footerData;
},
footerCellClassName({ $rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
switch ($rowIndex) {
case 3:
return "col-stylethree col-styleone"; //在<style>标签中写class对应这里的字符串名
default:
return "col-styleone";
}
}
if ($rowIndex === 3) {
return "col-stylethree";
}
},
footerMethod({ columns, data }) {
const footerData = [
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "平均分";
}
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
if (_columnIndex === i) {
return this.sumNum(data, column.property, "1");
}
}
return null;
}),
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "平均分";
}
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
if (_columnIndex === i) {
return this.sumNum(data, column.property, "2");
}
}
return null;
}),
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "得分";
}
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
return this.meanNum(data, column.property);
}
return null;
}),
];
footerData.push(
columns.map((column, _columnIndex) => {
if (_columnIndex === 0) {
return "排 序";
}
let footerData2 = this.vateUtils.judgeType.deepClone(footerData)[2];
footerData2.splice(0, 2);
let scoreSortList = [];
footerData2.forEach((ele, index) => {
scoreSortList.push({ [index.toString()]: ele });
});
for (let i = 2; i <= this.tableColumn.length + 2; i++) {
if (_columnIndex === i) {
return this.sortSore(scoreSortList, _columnIndex - 2);
}
}
})
);
return footerData;
},
meanNum(list, field) {
let count = 0;
list.forEach((item) => {
if (item[field] == undefined) {
count += 0;
} else {
count += Number(item[field]);
}
});
return (count / (list.length / 2)).toFixed(2);
},
sumNum(list, field, bidtype) {
let count = 0;
list.forEach((item) => {
if (item.bidType == bidtype && item[field] != undefined) {
count += Number(item[field]);
} else {
count += 0;
}
});
return (count / (list.length / 2)).toFixed(2);
},
sortSore(arrList, value) {
let scoreValue;
arrList.sort((a, b) => {
return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
});
arrList.forEach((ele, index) => {
if (value.toString() == Object.keys(ele)[0]) {
scoreValue = index + 1;
}
});
return scoreValue;
},
css部分
<style>
.col-styleone {
background-color: #e4e4e4;
}
.col-stylethree {
color: red;
}
</style>