1. The development background and the reason why the selected operation is lost?
Vue+element ui develops a table. This table has functions such as paging and batch deletion. The paging of the table calls the back-end interface to realize paging. After clicking the next page to call the interface interface to obtain data, the DOM is re-rendered, so it leads to the above The selection operation done on one page is gone!
Reproduce the problem:
1. Click CheckBox to select the data!
2. Clicking the next page or clicking the previous page means that the operation of selecting data is lost!
2. The code realizes batch deletion of table?
The key to realize batch deletion switching page selection operation is not lost:
@selection-change="selectionChange"
//当选择项发生变化时会触发该事件
:row-key="getRowKeys"
//行数据的 Key,能够拿到对应的选中的id并且返回出去
:reserve-selection="true"
//仅对table列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）Corresponding method:
selections:[]
//在export default里的data里声明一个变量
selectionChange: function (selections) {
this.selections = selections.map(row => row.id)
//将选中的数据存放在一个数组中
},
getRowKeys(row) {
return row.id;
//将id return出去
},Corresponding location:
The result display:
First page selection operation:
The second page is also selected:
Back to the first page selection operation is not lost:
1. The code of the complete case template is attached below.
<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. The logic code of the 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>