vue+element-ui inside table Component multi selection box to realize batch operation

Sometimes people are not overwhelmed by difficulties , I'm crying because I'm stupid ... When official documents are used somewhere , I feel that the understanding of this aspect will be deepened , Still need to record this place !

Details to be realized

* Click the check item in the header , There will be a full election ; Click again , It will be cancelled ;
* Each time you need to put the id Pass it on
* When switching paging , It needs memory : In other words, the original page should not disappear . Picture below :( It shows all the selected ones , Switch paging )
The first step is to add the corresponding check box

Specific reference element Example of official website
<el-table :data="tableData" ref="multipleTable" tooltip-effect="dark"
@selection-change="handleSelectionChange" v-loading="listLoading" border
style="width: 100%" @cell-dblclick="celldblclick"> <el-table-column
type="selection"></el-table-column> <el-table-column prop="id"
label=" number "></el-table-column> <el-table-column prop="nameOne"
label=" name 1"></el-table-column> <el-table-column prop="nameTwo"
label=" name 2"></el-table-column> </el-table>
Step two id In the past

This is the page layout
// Click multiple choice handleSelectionChange(val) { this.multipleSelection = val;
this.batchPassArr = [] // Each time you click, you need to clear the contents of the original array this.multipleSelection.map(item => {
// Traversing arrays , hold id Save it in a custom array this.batchPassArr.push(item.id) }) this.batchPassArr =
this.batchPassArr.join(',') },

The third step is to switch paging

It's in the meter <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark"
@selection-change="handleSelectionChange" v-loading="listLoading" border
style="width: 100%" @cell-dblclick="celldblclick"></el-table> Add one
:row-key="(row)=>{ return row.id}"
That's what it looks like <el-table :data="tableData" ref="multipleTable" :row-key="(row)=>{
return row.id}" tooltip-effect="dark" @selection-change="handleSelectionChange"
v-loading="listLoading" border style="width: 100%"
@cell-dblclick="celldblclick"></el-table>
Add one in your own
:reserve-selection="true"
That's the one below
<el-table-column type="selection" :reserve-selection="true"></el-table-column>

Happy Christmas Eve ​!!​!​

Where is the problem , More guidance

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree