-
Notifications
You must be signed in to change notification settings - Fork 2
/
PagingCheck.vue
144 lines (140 loc) · 3.61 KB
/
PagingCheck.vue
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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
136
137
138
139
140
141
142
143
144
<template>
<div class="wrap">
<div class="result">
已选:{{ allMultipleSelection }}
</div>
<el-table
class="table"
:data="tableData"
border
style="width: 100%"
@selection-change="handleSelectionChange"
ref="asTable"
>
<el-table-column
width="50"
type="selection"
fixed="left"
>
</el-table-column>
<el-table-column
prop="id"
label="ID"
>
</el-table-column>
<el-table-column
prop="name"
label="名字"
>
</el-table-column>
<el-table-column
label="操作"
width="100"
>
<template slot-scope="scope">
<el-button type="primary" plain size="small" @click="handleEdit(scope.row)" >编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="pagination.currentPage"
:page-size="pagination.size"
layout="total, prev, pager, next, jumper"
:total="pagination.total"
slot="pagination"
>
</el-pagination>
</div>
</template>
<script>
/* eslint-disable */
export default {
data () {
return {
tableData: [],
multipleSelection: [],
allMultipleSelection: [],
uniqueKey: 'id',
pagination: {
currentPage: 1,
size: 10,
total: 1000
}
}
},
beforeMount () {
this.fetchData()
},
methods: {
fetchData () {
this.tableData = []
let start = (this.pagination.currentPage - 1) * this.pagination.size
let end = this.pagination.currentPage * this.pagination.size
setTimeout(_ => {
for (let i = start; i < end; i++) {
this.tableData.push({
id: i,
name: `王${i}兰`
})
}
// @tip 实现分页复选
setTimeout(_ => {
this.setSelectedRow()
}, 50)
}, 200)
},
handleSelectionChange (val) {
this.multipleSelection = val
// @tip 实现分页复选
console.log(val, 'selection')
setTimeout(_ => {
this.resolveAllSelection()
}, 50)
},
resolveAllSelection () {
let currentPageData = this.tableData.map(item => item[this.uniqueKey]) // 当前页所有数据
let currentPageSelected = this.multipleSelection.map(item => item[this.uniqueKey]) // 当前页已选数据
let currentPageNotSelected = currentPageData.filter(item => !currentPageSelected.includes(item)) // 当前页未选数据
// 将当前页已选数据放入所有已选项
currentPageSelected.forEach(item => {
if (!this.allMultipleSelection.includes(item)) {
this.allMultipleSelection.push(item)
}
})
// 将所有已选项数据中当前页没选择的项移除
currentPageNotSelected.forEach(item => {
let idx = this.allMultipleSelection.indexOf(item)
if (idx > -1) {
this.allMultipleSelection.splice(idx, 1)
}
})
console.log(this.allMultipleSelection, 'all')
},
setSelectedRow () {
// 设置当前页已选项
this.tableData.forEach(item => {
if (this.allMultipleSelection.includes(item[this.uniqueKey])) {
this.$refs.asTable.toggleRowSelection(item, true)
console.log(item[this.uniqueKey], 'set')
}
})
},
handleCurrentChange () {
this.fetchData()
},
handleEdit () {
console.log('handleEdit')
}
}
}
</script>
<style lang="stylus" scoped>
.wrap
margin 40px
.table
margin-bottom 10px
.result
color red
</style>