1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
| <template>
| <a-card :bordered="false">
| <a-table
| rowKey="id"
| bordered
| :columns="columns"
| :dataSource="dataSource"
| :pagination="false"
| >
| </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',
| },
| ],
| dataSource: [
| { 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' },
| ]
| }
| },
| mounted() {
| this.tableAddTotalRow(this.columns, this.dataSource)
| },
| 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)
| }
|
| }
| }
| </script>
|
| <style scoped>
|
| </style>
|
|
