164 lines
4.9 KiB
Vue
164 lines
4.9 KiB
Vue
<template>
|
|
<a-card :bordered="false">
|
|
<a-table
|
|
rowKey="rowIndex"
|
|
bordered
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
:pagination="ipagination"
|
|
@change="handleTableChange"
|
|
>
|
|
</a-table>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TableTotal',
|
|
data() {
|
|
return {
|
|
columns: [
|
|
{
|
|
title: '#',
|
|
width: '180px',
|
|
align: 'center',
|
|
dataIndex: 'rowIndex',
|
|
customRender: function (text, r, index) {
|
|
return (text !== '合计') ? (parseInt(index) + 1) : text
|
|
}
|
|
},
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'name',
|
|
},
|
|
{
|
|
title: '贡献点',
|
|
dataIndex: 'point',
|
|
},
|
|
{
|
|
title: '等级',
|
|
dataIndex: 'level',
|
|
},
|
|
{
|
|
title: '更新时间',
|
|
dataIndex: 'updateTime',
|
|
},
|
|
],
|
|
/* 分页参数 */
|
|
ipagination:{
|
|
current: 1,
|
|
pageSize: 10,
|
|
pageSizeOptions: ['10', '20', '30'],
|
|
showTotal: (total, range) => {
|
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
},
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0
|
|
},
|
|
dataSource: [
|
|
{ id:"1",name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
|
|
{ name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
|
|
{ name: '李四', point: 53, level: 8, updateTime: '2019-8-12' },
|
|
{ name: '小红', point: 44, level: 5, updateTime: '2019-8-11' },
|
|
{ name: '王五', point: 97, level: 10, updateTime: '2019-8-10' },
|
|
{ name: '小明', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
{ name: '小张', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
{ name: '小六', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
{ name: '小五', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
{ name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
{ name: '李华', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
{ name: '小康', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
{ name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10' },
|
|
],
|
|
newArr:[],
|
|
newDataSource:[],
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.tableAddTotalRow(this.columns, this.dataSource)
|
|
/*新增分页合计方法*/
|
|
this.newDataSource=this.dataSource
|
|
this.dataHandling(this.ipagination.pageSize-1)
|
|
},
|
|
watch:{
|
|
'ipagination.pageSize':function(val) {
|
|
this.dataHandling(val-1)
|
|
}
|
|
},
|
|
methods: {
|
|
/** 表格增加合计行 */
|
|
tableAddTotalRow(columns, dataSource) {
|
|
let numKey = 'rowIndex'
|
|
let totalRow = { [numKey]: '合计' }
|
|
columns.forEach(column => {
|
|
let { key, dataIndex } = column
|
|
if (![key, dataIndex].includes(numKey)) {
|
|
|
|
let total = 0
|
|
dataSource.forEach(data => {
|
|
total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
|
|
console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
|
|
})
|
|
|
|
if (Number.isNaN(total)) {
|
|
total = '-'
|
|
}
|
|
totalRow[dataIndex] = total
|
|
}
|
|
})
|
|
|
|
dataSource.push(totalRow)
|
|
},
|
|
handleTableChange(pagination, filters, sorter) {
|
|
this.ipagination = pagination;
|
|
},
|
|
/*如果分页走这个方法*/
|
|
dataHandling(num) {
|
|
this.newArr=[];
|
|
let arrLength = this.newDataSource.length; // 数组长度;
|
|
let index = 0;
|
|
for (let i = 0; i < arrLength; i++) {
|
|
if (i % num === 0 && i !== 0) {
|
|
this.newArr.push(this.newDataSource.slice(index, i));
|
|
index = i;
|
|
}
|
|
if ((i + 1) === arrLength) {
|
|
this.newArr.push(this.newDataSource.slice(index, (i + 1)));
|
|
}
|
|
}
|
|
var arrs=this.newArr;
|
|
for (let i =0;i<arrs.length;i++){
|
|
let arr = arrs[i];
|
|
let newArr= { };
|
|
newArr.name="-";
|
|
newArr.updateTime="-";
|
|
newArr.rowIndex="合计"
|
|
var level=0;
|
|
var point=0;
|
|
for (let j=0;j<arr.length;j++){
|
|
level+=arr[j].level;
|
|
point+=arr[j].point;
|
|
}
|
|
newArr.level=level;
|
|
newArr.point=point;
|
|
arrs[i].push(newArr);
|
|
}
|
|
var newDataSource=[];
|
|
for (let i =0;i<arrs.length;i++){
|
|
let arr = arrs[i];
|
|
for(var j in arr){
|
|
newDataSource.push(arr[j]);
|
|
}
|
|
}
|
|
console.log(this.dataSource)
|
|
this.dataSource = Object.values(newDataSource);
|
|
console.log(this.dataSource)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |