1 <template>
2 <div class="table">
3 <p>表格的使用</p>
4 <el-table
5 :data="tables"
6 ref="tb"
7 :border="true"
8 @selection-change="handleSelectionChange"
9 style="width: 100%">
10 <el-table-column type="selection" width="55"/>
11 <el-table-column
12 prop="date"
13 label="日期"
14 width="180">
15 </el-table-column>
16 <el-table-column
17 prop="name"
18 label="姓名"
19 width="180">
20 </el-table-column>
21 <el-table-column
22 prop="address"
23 label="地址">
24 </el-table-column>
25 </el-table>
26 <div>
27 <el-pagination
28 background
29 @current-change="currentChange"
30 :current-page="pageIndex"
31 :total="tableData.length"
32 :page-size="pageSize"
33 :page-sizes="pageSizes"
34 layout="total, prev, pager, next, sizes, jumper"
35 @size-change='sizeChange'>
36 </el-pagination>
37 <el-button type="success" @click="onShow">22222</el-button>
38 </div>
39 </div>
40 </template>
41 <script>
42 export default {
43 name: 'test001',
44 data () {
45 return {
46 tableData: [{
47 index: 0,
48 objectId: 'tyui-123',
49 date: '2016-05-02',
50 name: '王小虎1',
51 address: '上海市普陀区金沙江路 1511 弄'
52 }, {
53 index: 1,
54 objectId: 'tyui-ljh',
55 date: '2016-05-04',
56 name: '王小虎2',
57 address: '上海市普陀区金沙江路 1512弄'
58 }, {
59 index: 2,
60 objectId: 'tyui-mbn',
61 date: '2016-05-01',
62 name: '王小虎3',
63 address: '上海市普陀区金沙江路 1513弄'
64 }, {
65 index: 3,
66 objectId: 'tyui-zccv',
67 date: '2016-05-03',
68 name: '王小虎4',
69 address: '上海市普陀区金沙江路 1514弄'
70 }, {
71 index: 4,
72 objectId: 'tyui-ghgh',
73 date: '2016-05-04',
74 name: '王小虎5',
75 address: '上海市普陀区金沙江路 1515弄'
76 }, {
77 index: 5,
78 objectId: 'tyui-asd',
79 date: '2016-05-04',
80 name: '王小虎6',
81 address: '上海市普陀区金沙江路 1516弄'
82 }, {
83 index: 6,
84 objectId: 'tyui-xdg',
85 date: '2016-05-04',
86 name: '王小虎7',
87 address: '上海市普陀区金沙江路 1517弄'
88 }
89 ],
90 value1: null,
91 secIndex: 0,
92 pageSize: 3,
93 pageSizes: [3, 5, 10],
94 pageIndex: 1,
95 tables: [],
96 multipleSelectionAll: [], // 所有选中的数据包含跨页数据
97 multipleSelection: [], // 当前页选中的数据
98 idKey: 'objectId'
99 }
100 },
101 mounted () {
102 console.log('44444444444444444')
103 this.find()
104 },
105 methods: {
106 onShow () {
107 this.multipleSelectionAll.forEach(item => {
108 this.$message.success(item['name'])
109 })
110 },
111 // 分页
112 currentChange (pageIndex) {
113 this.pageIndex = pageIndex
114 this.find()
115 console.log('currentChange-------------------------->>>>>>>>>>>>>>>>>>>>>')
116 },
117 sizeChange (pageSize) {
118 // 改变每页显示条数的时候调用一次
119 this.pageSize = pageSize
120 this.find()
121 console.log('sizeChange===========================>>>>>>>>>>>>>>>>>>>>>>>')
122 },
123 find () {
124 this.changePageCoreRecordData()
125 let start = this.pageSize * (this.pageIndex - 1)
126 console.log('start=====>' + start)
127 let end = this.pageSize * this.pageIndex
128 console.log('end=====>' + end)
129 this.tables = this.tableData.slice(start, end)
130 setTimeout(() => {
131 this.toggleSelection()
132 }, 50)
133 },
134 toggleSelection () {
135 if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
136 return
137 }
138 // 标识当前行的唯一键的名称
139 let idKey = this.idKey
140 let selectAllIds = []
141
142 this.multipleSelectionAll.forEach(row => {
143 selectAllIds.push(row[idKey])
144 })
145 this.$refs.tb.clearSelection()
146 for (let i = 0; i < this.tables.length; i++) {
147 if (selectAllIds.indexOf(this.tables[i][idKey]) >= 0) {
148 // 设置选中，记住table组件需要使用ref="tb"
149 this.$refs.tb.toggleRowSelection(this.tables[i], true)
150 }
151 }
152 },
153 handleSelectionChange (data) {
154 this.multipleSelection = data
155 setTimeout(() => {
156 this.changePageCoreRecordData()
157 }, 50)
158 },
159 changePageCoreRecordData () {
160 // 标识当前行的唯一键的名称
161 let idKey = this.idKey
162 // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
163 if (this.multipleSelectionAll.length <= 0) {
164 this.multipleSelectionAll = this.multipleSelection
165 return
166 }
167 // 总选择里面的key集合
168 let selectAllIds = []
169 this.multipleSelectionAll.forEach(row => {
170 selectAllIds.push(row[idKey])
171 })
172 let selectIds = []
173 // 获取当前页选中的id
174 this.multipleSelection.forEach(row => {
175 selectIds.push(row[idKey])
176 // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
177 if (selectAllIds.indexOf(row[idKey]) < 0) {
178 this.multipleSelectionAll.push(row)
179 }
180 })
181 let noSelectIds = []
182 // 得到当前页没有选中的id
183 this.tables.forEach(row => {
184 if (selectIds.indexOf(row[idKey]) < 0) {
185 noSelectIds.push(row[idKey])
186 }
187 })
188 // 但之前选中的数据取消选中，要从记忆选中数组中取出这条记录
189 noSelectIds.forEach(id => {
190 if (selectAllIds.indexOf(id) >= 0) {
191 for (let i = 0; i < this.multipleSelectionAll.length; i++) {
192 if (this.multipleSelectionAll[i][idKey] === id) {
193 // 如果总选择中有未被选中的，那么就删除这条
194 this.multipleSelectionAll.splice(i, 1)
195 break
196 }
197 }
198 }
199 })
200 }
201
202 }
203 }
204 </script>
