|
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
|
<template>
<div class="standard-table">
<div class="alert">
<a-alert type="info" :show-icon="true">
<div slot="message">
已选择 <a style="font-weight: 600">{{ selectedRows.length }}</a>
<template v-for="(item, index) in needTotalList" v-if="item.needTotal">
{{ item.title }} 总计
<a :key="index" style="font-weight: 600">
{{ item.customRender ? item.customRender(item.total) : item.total }}
</a>
</template>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
</a-alert>
</div>
<a-table
:size="size"
:bordered="bordered"
:loading="loading"
:columns="columns"
:dataSource="current"
:rowKey="rowKey"
:pagination="pagination"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: updateSelect }"
>
</a-table>
</div>
</template>
<script>
|
|
32
33
34
35
|
export default {
name: "StandardTable",
// props: ['bordered', 'loading', 'columns', 'data', 'rowKey', 'pagination', 'selectedRows'],
props: {
|
|
36
|
|
|
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
/**
* 数据加载函数,返回值必须是 Promise
* 默认情况下必须传递 data 参数;
* 如果使用本地数据渲染表格,业务代码中将获取本地数据包装为 Promise 即可。
*
* currentData 用于向外暴露表格当前渲染的数据,
* 业务开发中也可以直接修改 currentData,从而重新渲染表格(仅推荐用于客户端排序、数据过滤等场景)
*/
data: {
type: Function,
required: true
},
dataSource: {
type: Array,
default() {
return []
|
|
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
|
columns: {
type: Array,
required: true
},
/* pagination: {
type: Object,
default () {
return {}
}
},*/
pageSize: {
type: Number,
default: 10
},
pageNum: {
type: Number,
default: 1
},
pageSizeOptions: {
type: Array,
default() {
return ['10', '20', '30', '40', '50']
}
},
responseParamsName: {
type: Object,
default() {
return {}
|
|
83
84
|
}
},
|
|
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
bordered: {
type: Boolean,
default: false
},
/**
* 表格大小风格,default, middle, small
*/
size: {
type: String,
default: 'default'
},
rowKey: {
type: String,
default: ''
},
selectedRows: {
type: Array,
default: null
}
},
data() {
return {
needTotalList: [],
selectedRowKeys: [],
|
|
109
|
|
|
110
|
loading: true,
|
|
111
|
|
|
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
total: 0,
pageNumber: this.pageNum,
currentPageSize: this.pageSize,
defaultCurrent: 1,
sortParams: {},
current: [],
pagination: {},
paramsName: {},
}
},
created() {
//数据请求参数配置
this.paramsName = Object.assign(
{},
{
pageNumber: "pageNo",
pageSize: "pageSize",
total: "totalCount",
results: "data",
sortColumns: "sortColumns"
},
this.responseParamsName
);
|
|
136
|
|
|
137
|
this.needTotalList = this.initTotalList(this.columns)
|
|
138
|
|
|
139
140
141
142
143
144
145
146
147
148
149
150
151
|
// load data
this.loadData({pageNum: this.pageNumber})
},
methods: {
updateSelect(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
let list = this.needTotalList
this.needTotalList = list.map(item => {
return {
...item,
total: selectedRows.reduce((sum, val) => {
return sum + val[item.dataIndex]
}, 0)
|
|
152
|
}
|
|
153
154
155
156
157
158
159
160
|
})
this.$emit('change', selectedRowKeys, selectedRows)
},
initTotalList(columns) {
const totalList = []
columns.forEach(column => {
if (column.needTotal) {
totalList.push({...column, total: 0})
|
|
161
|
}
|
|
162
163
164
|
})
return totalList
},
|
|
165
|
|
|
166
167
168
169
170
171
172
|
loadData(params) {
let that = this
that.loading = true
params = Object.assign({}, params)
const remoteParams = Object.assign({}, that.sortParams)
remoteParams[that.paramsName.pageNumber] = params.pageNum || that.pageNumber
remoteParams[that.paramsName.pageSize] = params.pageSize || that.currentPageSize
|
|
173
|
|
|
174
175
176
177
178
179
|
if (params.pageNum) {
that.pageNumber = params.pageNum
}
if (params.pageSize) {
that.currentPageSize = params.pageSize
}
|
|
180
|
|
|
181
|
let dataPromise = that.data(remoteParams)
|
|
182
|
|
|
183
184
|
dataPromise.then(response => {
if (!response) {
|
|
185
|
that.loading = false
|
|
186
|
return
|
|
187
|
}
|
|
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
let results = response[that.paramsName.results]
results = (results instanceof Array && results) || []
that.current = results
that.$emit("update:currentData", that.current.slice())
that.$emit("dataloaded", that.current.slice())
that.total = response[that.paramsName.total] * 1
that.pagination = that.pager()
that.loading = false
}, () => {
// error callback
that.loading = false
})
},
// eslint-disable-next-line
onPagerChange(page, pageSize) {
this.pageNumber = page
this.loadData({pageNum: page})
|
|
208
|
},
|
|
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
onPagerSizeChange(current, size) {
this.currentPageSize = size
/*
if (current === this.pageNumber) this.loadData()
console.log('page-size-change', current, size)
*/
},
onClearSelected() {
this.selectedRowKeys = []
this.updateSelect([], [])
},
pager() {
return {
total: this.total,
showTotal: total => `共有 ${total} 条`,
showSizeChanger: true,
pageSizeOptions: this.pageSizeOptions,
pageSize: this.pageSize,
defaultCurrent: this.defaultCurrent,
onChange: this.onPagerChange,
onShowSizeChange: this.onPagerSizeChange
|
|
230
231
|
}
}
|
|
232
233
234
235
236
237
238
239
240
241
242
243
|
},
watch: {
'selectedRows': function (selectedRows) {
this.needTotalList = this.needTotalList.map(item => {
return {
...item,
total: selectedRows.reduce((sum, val) => {
return sum + val[item.dataIndex]
}, 0)
}
})
}
|
|
244
|
}
|
|
245
|
}
|
|
246
247
248
|
</script>
<style scoped>
|
|
249
250
251
|
.alert {
margin-bottom: 16px;
}
|
|
252
|
</style>
|