一、开发背景及其选中操作丢失的原因？
vue+element ui开发一个table，这个表格要有分页、批量删除等功能，table的分页调用后端接口实现分页，在点击下一页调接口接口获取数据导致了DOM的重新渲染，所以导致在上一页做的选中操作没了！
复现问题：
1、点击CheckBox选中数据！
2、点击下一页或者点击上一页是选中数据的操作丢失了！
二、代码实现table的批量删除？
实现批量删除切换页面选中操作不丢失的关键是：
@selection-change="selectionChange"
//当选择项发生变化时会触发该事件
:row-key="getRowKeys"
//行数据的 Key,能够拿到对应的选中的id并且返回出去
:reserve-selection="true"
//仅对table列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）对应的方法：
selections:[]
//在export default里的data里声明一个变量
selectionChange: function (selections) {
this.selections = selections.map(row => row.id)
//将选中的数据存放在一个数组中
},
getRowKeys(row) {
return row.id;
//将id return出去
},对应的位置：
结果展示：
第一页选中操作：
第二页也选中：
回到第一页选中操作并未丢失：
1、下面附上完整的案例template的代码。
<template>
<div>
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-row>
<el-col :span="5">
<el-form-item label="审批人">
<el-input
v-model="formInline.user"
placeholder="审批人"
></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="卫生间" value="1"></el-option>
<el-option label="操场" value="2"></el-option>
<el-option label="监狱单间" value="3"></el-option>
<el-option label="厨房" value="4"></el-option>
<el-option label="棋牌室" value="5"></el-option>
<el-option label="监控室" value="6"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="责任人">
<el-input
v-model="formInline.popr"
placeholder="责任人"
></el-input> </el-form-item
></el-col>
<el-col :span="5"
><el-form-item label="监察人">
<el-input
v-model="formInline.add"
placeholder="监察人"
></el-input> </el-form-item
></el-col>
</el-row>
</el-form>
<el-row>
<el-col :span="10" :offset="14">
<el-button icon="el-icon-search" type="primary">查询</el-button>
<el-button icon="el-icon-refresh" type="success">重置</el-button>
<el-button icon="el-icon-download" type="info">导出</el-button>
<el-button icon="el-icon-upload" type="warning">上传</el-button>
<el-button icon="el-icon-delete" type="danger" :disabled="this.tableAll.length===0" @click="handleBatchDelete()">批量删除</el-button>
</el-col>
</el-row>
</div>
<div>
<el-table
@selection-change="selectionChange"
:row-key="getRowKeys"
:v-loading="loading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark">
<el-table-column
:reserve-selection="true"
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{
{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagenum"
:page-sizes="sizes"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totals"
>
</el-pagination>
</div>
</template>2、script的逻辑代码。
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
data() {
return {
formInline: {
user: "",
region: "",
popr: "",
add: "",
},
tableAll: [
{
id:1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:2,
date: "2017",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:3,
date: "2018",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:4,
date: "201789",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:5,
date: "2017dada",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:6,
date: "201wfwfw7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:7,
date: "201wgggdh7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:8,
date: "201hfjgkuk7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:9,
date: "2rjrjrj017",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:10,
date: "2kulil017",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:11,
date: "20jyjyjy17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:12,
date: "20373717",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:13,
date: "2075773717",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:14,
date: "20737586987317",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:15,
date: "201ddd7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:16,
date: "20qqq17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:17,
date: "20eee17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:18,
date: "20rrrr17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:19,
date: "201ttt7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
],
pagenum: 1,
sizes: [2, 5, 10, 20, 50],
totals: 0,
pagesize: 5,
tablepage: [],
tableData: [],
loading: false,
selections: [],
};
},
created() {
this.handleSizeChange();
},
methods: {
onSubmit() {
console.log("submit!");
},
handleSizeChange(val) {
if (val) {
this.pagesize = val;
this.loading = true;
this.pagenum = Math.ceil(this.tableAll / this.pagesize) || 1;
this.totals = this.tableAll.length;
for (let i = 0; i < this.pagenum; i++) {
// 这是筛选出来的对应的页数和条数的数据
this.tablepage[i] = this.tableAll.slice(
this.pagesize * i,
this.pagesize * (i + 1)
);
// console.log(this.tablepage[i]);
// 将对应的值赋值给页面展示的数组
this.tableData = this.tablepage[i];
}
// console.log(response.content.length);
// this.tableData = response.content;
this.loading = false;
} else {
this.loading = true;
this.pagenum = Math.ceil(this.tableAll / this.pagesize) || 1;
this.totals = this.tableAll.length;
for (let i = 0; i < this.pagenum; i++) {
// 这是筛选出来的对应的页数和条数的数据
this.tablepage[i] = this.tableAll.slice(
this.pagesize * i,
this.pagesize * (i + 1)
);
// console.log(this.tablepage[i]);
// 将对应的值赋值给页面展示的数组
this.tableData = this.tablepage[i];
}
// console.log(response.content.length);
// this.tableData = response.content;
this.loading = false;
}
},
handleCurrentChange(val) {
this.pagenum = val;
for (let i = 0; i < this.pagenum; i++) {
// 通过页数进行遍历
this.tablepage[i] = this.tableAll.slice(
// 这是筛选出来的对应的页数和条数的数据
this.pagesize * i,
this.pagesize * (i + 1)
);
// console.log(this.tablepage[i]);
// 将对应的值赋值给页面展示的数组
this.tableData = this.tablepage[i];
}
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleBatchDelete: function () {
// let ids = this.selectionss.map(row => row.id).toString()
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
let params = this.selections
console.log(params);
// let idArray = (ids+'').split(',')
// for(var i=0; i<idArray.length; i++) {
// params.push({'id':idArray[i]})
// }
this.loading = true
BookDataManagement.del(params).then((response) => {
this.$message({message: '删除成功', type: 'success'})
this.$refs.table.clearSelection()
// 删除成功后清除全选操作
this.queryDataByCondition()
})
this.loading = false
}).catch(() => {
})
},
getRowKeys(row) {
return row.id;
},
selectionChange: function (selections) {
this.selections = selections.map(row => row.id)
},
},
};
</script>