【自用】VUE跨页多选 - 以进行批量删除或批量下载二维码

一、HTML 部分的代码

1.代码示例：

<div style="border-radius: 20px;overflow: hidden;display: block;height: 82.5vh;width: 100%;">
   <el-table show-header ref="multipleTableRef" v-if="tableData" :data="tableData" height="88vh" style="width: 100%"
   @selection-change="handleSelectionChange" stripe id="img" :row-key="getRowkeys">
     <el-table-column type="selection" reserve-selection=true width="55px" />
     <el-table-column prop="id" label="编号" sortable width="auto" />
     <el-table-column prop="name" label="名称" sortable width="auto" />
     <el-table-column prop="model" label="规格型号" sortable width="auto" />
     <el-table-column prop="produceTime" label="生产日期" sortable width="auto" />
     <el-table-column prop="departmentName" label="当前所在部门" sortable width="auto" />
     <el-table-column prop="status" label="钢管状态" sortable width="auto" />
     <el-table-column fixed="right" label="操作" width="auto" show-overflow-tooltip>
       <template scope="scope">
         <el-button size="mini" type="primary" @click="ifEdit(scope.row)">编辑</el-button>
         <el-button size="mini" type="primary" @click="ifDownload(scope.row)">下载二维码</el-button>
       </template>
     </el-table-column>
   </el-table>
 </div>

2.实现跨页多选的 关键点（以下所有代码操作都是上面代码的局部）！

步骤1：
为 <el-table> 标签添加一个属性，并设置一个名称为getRowkeys的方法：

<el-table show-header ref="multipleTableRef" v-if="tableData" :data="tableData" @selection-change="handleSelectionChange" stripe id="img" :row-key="getRowkeys">

步骤2
为带有 type=selection 的 <el-table-column> 标签添加一个属性，并设置值为true：

<el-table-column type="selection" reserve-selection=true width="55px" />

二、JS 部分的代码

1.代码示例：

注意！row.xxx ，请使用你row中的唯一标识作为 xxx ！
我这里使用的是id，但你要按照你的数据来决定它是不是id！

methods: {
	// 跨分页保持批量选中 row.key 依赖方法
    getRowkeys:function (row){
    	// 注意！row.xxx ，请使用你row中的唯一标识作为 xxx ！我这里使用的是id，但你要按照你的数据来决定它是不是id！
      	return row.id;
    },
}

三、大工告成！

去看看吧，现在已经能够跨页进行多选，并操作不同分页的数据了！


回到第一页的时候数据还在，保持了被选中的状态！